:root {
    --primary: #0D9488;
    --secondary: #5EEAD4;
    --background: #e5efed;
    --card: #FFFFFF;
    --text: #134E4A;
    /* derived */
    --sidebar-bg: #072f2e; /* darkened variant of primary */
    --sidebar-text: #d8f7f4;
    --muted: rgba(19,78,74,0.65);
    --panel-shadow: rgba(3, 22, 21, 0.06);

    /* Added tokens used by toast overrides */
    --white: #ffffff;
    --celestial-grey: #e6eef0;
    --regal-bronze: #0D9488; /* accent, reuse primary */
    --radius-sm: 8px;
    --text-sm: 0.875rem;
    --velvet-night: #052524; /* dark text for readable contrast */

    /* semantic colors for toasts */
    --success: #16a34a;
    --danger: #ef4444;
    --warning: #f59e0b;
    --info: #0ea5e9;
}

/* base */
html { font-size: 14px; }
@media (min-width: 768px) { html { font-size: 16px; } }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--background);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* felt-panel (reusable card style) */
.felt-panel {
  background: var(--card);
  border-radius: 12px;
  border: 1px solid rgba(19,78,74,0.06);
  padding: 1.25rem;
  box-shadow: 0 10px 30px var(--panel-shadow);
}

/* Application shell layout */
.app-shell {
  display: block;
  min-height: 100vh;
}

/* Sidebar */
.app-sidebar {
  width: 300px;
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  background: linear-gradient(180deg, var(--sidebar-bg), color-mix(in srgb, var(--sidebar-bg) 85%, black 15%));
  color: var(--sidebar-text);
  padding: 1.25rem 0.8rem;
  box-shadow: 4px 0 30px rgba(2, 20, 20, 0.08);
  border-right: 1px solid rgba(255,255,255,0.02);
  z-index: 1000;
}

.sidebar-top { padding: 0 0.25rem 1rem 0.25rem; display: flex; align-items: center; gap: .5rem; }
.brand { display:flex; gap: .5rem; align-items:center; text-decoration: none; }
.brand-mark { width:40px; height:40px; border-radius:8px; background: linear-gradient(135deg,var(--secondary), var(--primary)); box-shadow: inset 0 1px rgba(255,255,255,0.06); }
.brand-text { font-weight:700; color: white; font-size: 1.05rem; letter-spacing: .2px; }
.brand-accent { color: var(--secondary); font-weight:800; margin-left: .15rem; }

/* nav */
.sidebar-nav { margin-top: .25rem; padding: 0 .25rem; }
.sidebar-nav .nav { list-style:none; padding:0; margin:0; }
.sidebar-nav .nav-item { margin-bottom: .25rem; }
.sidebar-nav .nav-link {
  display:flex;
  align-items:center;
  gap:.75rem;
  padding:.6rem .75rem;
  color: var(--sidebar-text);
  border-radius:8px;
  text-decoration:none;
  font-size:.95rem;
  transition: background .12s, color .12s, transform .06s;
}
.sidebar-nav .nav-link .nav-icon { flex:0 0 20px; color: rgba(255,255,255,0.9); }
.sidebar-nav .nav-link:hover { background: rgba(255,255,255,0.03); color: white; transform: translateY(-1px); }

/* active state with left accent bar */
.sidebar-nav .nav-link.active {
  background: linear-gradient(90deg, rgba(94,234,212,0.06), rgba(13,148,136,0.03));
  color: var(--secondary);
  position: relative;
  font-weight: 600;
}
.sidebar-nav .nav-link.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 4px;
  border-radius: 4px;
  background: var(--secondary);
}

/* headings inside sidebar */
.nav-heading {
  display:block;
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color: rgba(255,255,255,0.65);
  margin: .9rem .6rem .3rem .6rem;
}

/* sidebar footer */
.sidebar-footer { position:absolute; bottom:18px; left:16px; right:16px; }

/* topbar */
.app-topbar {
  position: fixed;
  left: 300px;
  right: 24px;
  top: 12px;
  height: 56px;
  z-index: 900;
}
.topbar-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:0 .5rem;
}
.btn-ghost { background: transparent; border: none; color: var(--muted); }
.topbar-right { display:flex; align-items:center; gap:.75rem; }

/* avatar */
.avatar {
  width:36px;
  height:36px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background: linear-gradient(180deg,var(--secondary), rgba(94,234,212,0.6));
  color: #052524;
  font-weight:700;
  box-shadow: 0 6px 14px rgba(5,37,37,0.08);
}

/* content area */
.app-content {
  margin-left: 300px;
  padding: 88px 40px 40px 40px; /* leave top space for topbar and breathing */
  min-height: calc(100vh - 120px);
}
.content-inner {
  border-radius: 0px;
  background: transparent; /* felt-panel supplies card background */
}

/* responsive: collapse sidebar on smaller screens */
@media (max-width: 991px) {
  .app-sidebar { position: fixed; transform: translateX(-110%); transition: transform .22s ease; left: 0; top:0; }
  .app-sidebar.show { transform: translateX(0); }
  .app-topbar { left: 16px; right: 16px; }
  .app-content { margin-left: 0; padding: 72px 16px 24px; }
}

/* Kendo grid small adjustments to match theme */
.k-grid .k-grid-header, .k-grid .k-grid-content {
  background: transparent;
  color: var(--text);
}
.k-grid .k-header { background: transparent; border-bottom: 1px solid rgba(19,78,74,0.06); }
.k-grid .k-grid-content tr:hover > td { background: rgba(13,148,136,0.03); }

/* form controls adjustments */
.form-control {
  border-radius: 0px;
  border: 1px solid rgba(19,78,74,0.08);
  background-clip: padding-box;
}

/* Button size & icon centering */
.v-action-btn {
    width: 28px;
    height: 28px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--celestial-grey);
    border-radius: var(--radius-sm);
    color: var(--velvet-night);
    font-size: 14px; /* control icon size */
}

    .v-action-btn i {
        line-height: 1;
        display: flex;
        align-items: center;
        justify-content: center;
    }


    /* Optional hover */
    .v-action-btn:hover {
        background-color: #0d6efd;
        color: #fff;
    }


/* Toasts - Toastr Library Overrides (custom template `.v-toast`) */
.v-toast {
    background-color: var(--white) !important;
    border: 1px solid var(--celestial-grey) !important;
    border-left: 3px solid var(--regal-bronze) !important;
    border-radius: var(--radius-sm) !important;
    color: var(--velvet-night) !important;
    font-size: var(--text-sm) !important;
    box-shadow: 0 4px 12px rgba(18, 28, 42, 0.12) !important;
    opacity: 1 !important;
}

    .v-toast .toast-message,
    .v-toast .toast-title {
        color: var(--velvet-night) !important;
        font-family: 'Inter', sans-serif !important;
    }

    .v-toast .toast-close-button {
        color: var(--velvet-night) !important;
        opacity: 0.6;
    }

        .v-toast .toast-close-button:hover {
            opacity: 1;
        }

    .v-toast .toast-progress {
        background-color: var(--regal-bronze) !important;
    }

    /* Toast Success */
    .v-toast.toast-success {
        border-left-color: var(--success) !important;
        background-color: var(--white) !important;
    }

        .v-toast.toast-success .toast-message,
        .v-toast.toast-success .toast-title {
            color: var(--success) !important;
        }

        .v-toast.toast-success .toast-progress {
            background-color: var(--success) !important;
        }

    /* Toast Error */
    .v-toast.toast-error {
        border-left-color: var(--danger) !important;
        background-color: var(--danger) !important;
    }

        .v-toast.toast-error .toast-message,
        .v-toast.toast-error .toast-title {
            color: var(--white) !important;
        }

        .v-toast.toast-error .toast-close-button {
            color: var(--white) !important;
        }

        .v-toast.toast-error .toast-progress {
            background-color: rgba(255, 255, 255, 0.4) !important;
        }

    /* Toast Warning */
    .v-toast.toast-warning {
        border-left-color: var(--warning) !important;
        background-color: var(--white) !important;
    }

        .v-toast.toast-warning .toast-message,
        .v-toast.toast-warning .toast-title {
            color: var(--warning) !important;
        }

        .v-toast.toast-warning .toast-progress {
            background-color: var(--warning) !important;
        }

    /* Toast Info */
    .v-toast.toast-info {
        border-left-color: var(--info) !important;
        background-color: var(--white) !important;
    }

        .v-toast.toast-info .toast-message,
        .v-toast.toast-info .toast-title {
            color: var(--info) !important;
        }

        .v-toast.toast-info .toast-progress {
            background-color: var(--info) !important;
        }

/* Compatibility: Toastr default classes (ensure readable text for standard Toastr markup) */
.toast {
    background-color: var(--white) !important;
    border: 1px solid var(--celestial-grey) !important;
    border-left: 3px solid var(--regal-bronze) !important;
    border-radius: var(--radius-sm) !important;
    color: var(--velvet-night) !important;
    font-size: var(--text-sm) !important;
    box-shadow: 0 4px 12px rgba(18, 28, 42, 0.12) !important;
    opacity: 1 !important;
}

/* Title / message */
.toast .toast-message,
.toast .toast-title {
    color: var(--velvet-night) !important;
    font-family: 'Inter', sans-serif !important;
}

/* Close button */
.toast .toast-close-button {
    color: var(--velvet-night) !important;
    opacity: 0.6;
}
.toast .toast-close-button:hover { opacity: 1; }

/* Progress bar */
.toast .toast-progress {
    background-color: var(--regal-bronze) !important;
}

/* Success */
.toast.toast-success {
    border-left-color: var(--success) !important;
    background-color: var(--white) !important;
}
.toast.toast-success .toast-message,
.toast.toast-success .toast-title {
    color: var(--success) !important;
}
.toast.toast-success .toast-progress { background-color: var(--success) !important; }

/* Error */
.toast.toast-error {
    border-left-color: var(--danger) !important;
    background-color: var(--danger) !important;
    color: var(--white) !important;
}
.toast.toast-error .toast-message,
.toast.toast-error .toast-title {
    color: var(--white) !important;
}
.toast.toast-error .toast-close-button { color: var(--white) !important; }
.toast.toast-error .toast-progress { background-color: rgba(255,255,255,0.4) !important; }

/* Warning */
.toast.toast-warning {
    border-left-color: var(--warning) !important;
    background-color: var(--white) !important;
}
.toast.toast-warning .toast-message,
.toast.toast-warning .toast-title {
    color: var(--warning) !important;
}
.toast.toast-warning .toast-progress { background-color: var(--warning) !important; }

/* Info */
.toast.toast-info {
    border-left-color: var(--info) !important;
    background-color: var(--white) !important;
}
.toast.toast-info .toast-message,
.toast.toast-info .toast-info .toast-title,
.toast.toast-info .toast-title {
    color: var(--info) !important;
}
.toast.toast-info .toast-progress { background-color: var(--info) !important; }


.profile-btn {
    background: transparent;
    border: none;
    padding: 4px 8px;
}

    .profile-btn:focus,
    .profile-btn:hover {
        background: rgba(0, 0, 0, 0.05);
    }

.profile-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #0d1b2a;
    color: #fff;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.profile-email {
    font-size: 14px;
    color: #0d1b2a;
    font-weight: 500;
    white-space: nowrap;
}

.profile-btn .bi-chevron-down {
    font-size: 12px;
    opacity: 0.7;
}

.title-divider {
    border: none;
    border-top: 2px solid #3ac4b3;
    margin: 8px 0 16px;
}