/* Scheduler Console — custom styles layered on top of Tailwind CDN */

:root {
    color-scheme: light dark;
}

/* Smooth theme transition for common elements */
body,
.sm-card,
.sm-input,
.sm-btn {
    transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}

/* ---------- Reusable component classes ---------- */

.sm-card {
    border-radius: 1rem;
    border: 1px solid rgb(226 232 240);
    background-color: #fff;
    box-shadow: 0 1px 3px rgb(15 23 42 / .06), 0 1px 2px rgb(15 23 42 / .04);
}

.dark .sm-card {
    border-color: rgb(30 41 59);
    background-color: rgb(15 23 42 / .6);
}

.sm-label {
    display: block;
    font-size: .8125rem;
    font-weight: 600;
    margin-bottom: .375rem;
    color: rgb(71 85 105);
}

.dark .sm-label {
    color: rgb(148 163 184);
}

.sm-input,
.sm-textarea,
.sm-select {
    width: 100%;
    border-radius: .625rem;
    border: 1px solid rgb(203 213 225);
    background-color: #fff;
    padding: .5rem .75rem;
    font-size: .875rem;
    color: rgb(15 23 42);
    outline: none;
}

.sm-input:focus,
.sm-textarea:focus,
.sm-select:focus {
    border-color: rgb(59 130 246);
    box-shadow: 0 0 0 3px rgb(59 130 246 / .18);
}

.dark .sm-input,
.dark .sm-textarea,
.dark .sm-select {
    border-color: rgb(51 65 85);
    background-color: rgb(2 6 23 / .6);
    color: rgb(226 232 240);
}

.sm-textarea {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    resize: vertical;
    line-height: 1.5;
}

/* Buttons */
.sm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    border-radius: .625rem;
    padding: .5rem 1rem;
    font-size: .875rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    white-space: nowrap;
    user-select: none;
    text-decoration: none;
}

.sm-btn:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.sm-btn-primary {
    background-image: linear-gradient(to bottom right, #3b82f6, #4f46e5);
    color: #fff;
    box-shadow: 0 4px 14px rgb(59 130 246 / .3);
}

.sm-btn-primary:hover:not(:disabled) {
    filter: brightness(1.05);
    box-shadow: 0 6px 20px rgb(59 130 246 / .4);
}

.sm-btn-secondary {
    background-color: #fff;
    border-color: rgb(203 213 225);
    color: rgb(51 65 85);
}

.sm-btn-secondary:hover:not(:disabled) {
    background-color: rgb(248 250 252);
}

.dark .sm-btn-secondary {
    background-color: rgb(30 41 59);
    border-color: rgb(51 65 85);
    color: rgb(226 232 240);
}

.dark .sm-btn-secondary:hover:not(:disabled) {
    background-color: rgb(51 65 85);
}

.sm-btn-danger {
    background-image: linear-gradient(to bottom right, #f43f5e, #e11d48);
    color: #fff;
    box-shadow: 0 4px 14px rgb(244 63 94 / .3);
}

.sm-btn-danger:hover:not(:disabled) {
    filter: brightness(1.05);
}

/* Tab links */
.sm-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .875rem .25rem;
    font-size: .875rem;
    font-weight: 600;
    color: rgb(100 116 139);
    border-bottom: 2px solid transparent;
    white-space: nowrap;
}

.sm-tab:hover {
    color: rgb(37 99 235);
}

.sm-tab.active {
    color: rgb(37 99 235);
    border-bottom-color: rgb(37 99 235);
}

.dark .sm-tab {
    color: rgb(148 163 184);
}

.dark .sm-tab.active {
    color: rgb(96 165 250);
    border-bottom-color: rgb(96 165 250);
}

/* Data tables */
.sm-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .8125rem;
}

.sm-table thead th {
    position: sticky;
    top: 0;
    background-color: rgb(248 250 252);
    text-align: left;
    font-weight: 600;
    color: rgb(71 85 105);
    padding: .625rem .75rem;
    border-bottom: 1px solid rgb(226 232 240);
    cursor: pointer;
    user-select: none;
}

.dark .sm-table thead th {
    background-color: rgb(30 41 59);
    color: rgb(148 163 184);
    border-color: rgb(51 65 85);
}

.sm-table tbody td {
    padding: .5rem .75rem;
    border-bottom: 1px solid rgb(241 245 249);
}

/* Footer (totals) cells must share the body padding so numbers line up. */
.sm-table tfoot td {
    padding: .5rem .75rem;
    font-weight: 600;
}

/* Column alignment — these must beat the default `thead th { text-align:left }`
   rule, so scope them under .sm-table to raise specificity above the utilities. */
.sm-table th.text-right,
.sm-table td.text-right {
    text-align: right;
}

.sm-table th.text-center,
.sm-table td.text-center {
    text-align: center;
}

.sm-table th.text-left,
.sm-table td.text-left {
    text-align: left;
}

/* Right-aligned numeric columns read better with tabular figures. */
.sm-table td.text-right,
.sm-table .tabular-nums {
    font-variant-numeric: tabular-nums;
}

.dark .sm-table tbody td {
    border-color: rgb(30 41 59 / .6);
}

.sm-table tbody tr:hover {
    background-color: rgb(239 246 255);
}

.dark .sm-table tbody tr:hover {
    background-color: rgb(30 41 59 / .5);
}

/* Custom scrollbar */
.sm-scroll::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.sm-scroll::-webkit-scrollbar-thumb {
    background-color: rgb(203 213 225);
    border-radius: 9999px;
    border: 2px solid transparent;
    background-clip: content-box;
}

.dark .sm-scroll::-webkit-scrollbar-thumb {
    background-color: rgb(51 65 85);
}

/* Toast animation */
@keyframes sm-toast-in {
    from { opacity: 0; transform: translateX(1rem); }
    to { opacity: 1; transform: translateX(0); }
}

.sm-toast {
    animation: sm-toast-in .25s ease-out;
}