/* SagarCement Connects — theme tokens (green light / green dark) */

:root,
[data-theme="green-light"] {
    --sb-bg-from:      #0d3d24;
    --sb-bg-mid:       #114f2e;
    --sb-bg-to:        #0a2e1b;
    --sb-border:       rgba(31,138,60,0.15);
    --sb-text:         #a9c9b6;
    --sb-text-hover:   #eafff0;
    --sb-brand-bg:     rgba(255,255,255,0.04);
    --sb-icon-bg:      rgba(255,255,255,0.06);
    --sb-icon-hover:   rgba(52,199,89,0.16);
    --sb-active-bg:    rgba(52,199,89,0.16);
    --sb-active-bar-a: #7fe3a0;
    --sb-active-bar-b: #1f8a3c;
    --sb-active-text:  #7fe3a0;
    --sb-hover-row:    rgba(52,199,89,0.09);
    --sb-label:        rgba(169,201,182,0.5);
    --sb-divider:      rgba(255,255,255,0.06);
    --sb-user-bg:      rgba(10,46,27,0.7);
    --sb-user-border:  rgba(52,199,89,0.15);
    --sb-user-name:    #dff5e6;
    --sb-user-role:    #6ea587;

    --page-bg:         #f3f9f4;
    --card-bg:         #ffffff;
    --card-border:     #dcefe1;
    --card-shadow:     rgba(15,60,30,0.06);

    --tb-bg:           #ffffff;
    --tb-border:       #dcefe1;
    --tb-title:        #0d3d24;
    --tb-sub:          #7fa08c;
    --tb-btn-bg:       #eef8f0;
    --tb-btn-border:   #dcefe1;
    --tb-btn-color:    #2c7a45;
    --tb-btn-hbg:      #dff2e4;
    --tb-btn-hcolor:   #1f8a3c;

    --body-color:      #17301f;
    --toggle-track:    #1e6e3a;
    --toggle-thumb:    #34c759;

    --brand-primary:   #1f8a3c;
    --brand-primary-d: #145c28;
    --badge-admin:     #b3261e;
    --badge-hr:        #7a4fbf;
    --badge-manager:   #b06b00;
    --badge-employee:  #1f8a3c;
}

[data-theme="green-dark"] {
    --sb-bg-from:      #07130c;
    --sb-bg-mid:       #0a1a10;
    --sb-bg-to:        #050d08;
    --sb-border:       rgba(52,199,89,0.12);
    --sb-text:         #8fae9a;
    --sb-text-hover:   #ffffff;
    --sb-brand-bg:     rgba(255,255,255,0.02);
    --sb-icon-bg:      rgba(255,255,255,0.05);
    --sb-icon-hover:   rgba(52,199,89,0.14);
    --sb-active-bg:    rgba(52,199,89,0.15);
    --sb-active-bar-a: #6ee394;
    --sb-active-bar-b: #34c759;
    --sb-active-text:  #6ee394;
    --sb-hover-row:    rgba(255,255,255,0.04);
    --sb-label:        rgba(143,174,154,0.4);
    --sb-divider:      rgba(255,255,255,0.05);
    --sb-user-bg:      rgba(5,13,8,0.7);
    --sb-user-border:  rgba(52,199,89,0.12);
    --sb-user-name:    #d8f5e2;
    --sb-user-role:    #557a63;

    --page-bg:         #0b120d;
    --card-bg:         #101b13;
    --card-border:     #1c2e21;
    --card-shadow:     rgba(0,0,0,0.35);

    --tb-bg:           #101b13;
    --tb-border:       #1c2e21;
    --tb-title:        #eafff0;
    --tb-sub:          #6c8c78;
    --tb-btn-bg:       #16241a;
    --tb-btn-border:   #1c2e21;
    --tb-btn-color:    #8fd6a5;
    --tb-btn-hbg:      #1c2e21;
    --tb-btn-hcolor:   #6ee394;

    --body-color:      #d8f5e2;
    --toggle-track:    #163d24;
    --toggle-thumb:    #34c759;

    --brand-primary:   #34c759;
    --brand-primary-d: #1f8a3c;
    --badge-admin:     #ff6b60;
    --badge-hr:        #c39bff;
    --badge-manager:   #ffb84d;
    --badge-employee:  #6ee394;
}

* { box-sizing: border-box; }

body {
    background: var(--page-bg);
    color: var(--body-color);
    font-family: 'Segoe UI', system-ui, sans-serif;
    margin: 0;
}

.sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 240px;
    background: linear-gradient(180deg, var(--sb-bg-from), var(--sb-bg-mid) 55%, var(--sb-bg-to));
    border-right: 1px solid var(--sb-border);
    display: flex;
    flex-direction: column;
    z-index: 100;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 16px;
    background: var(--sb-brand-bg);
    border-bottom: 1px solid var(--sb-divider);
}
.sidebar-brand img { height: 32px; width: auto; }
.sidebar-brand span { color: var(--sb-text-hover); font-weight: 700; font-size: 0.95rem; }

.sidebar-nav { flex: 1; overflow-y: auto; padding: 10px 8px; }
.sidebar-nav .nav-label {
    font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--sb-label); padding: 12px 10px 6px;
}
.sidebar-nav a {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 10px; margin: 2px 0; border-radius: 8px;
    color: var(--sb-text); text-decoration: none; font-size: 0.9rem;
}
.sidebar-nav a:hover { background: var(--sb-hover-row); color: var(--sb-text-hover); }
.sidebar-nav a.active {
    background: var(--sb-active-bg); color: var(--sb-active-text);
    box-shadow: inset 3px 0 0 var(--sb-active-bar-b);
}

.sidebar-nav a i { width: 18px; text-align: center; }
.nav-icon-home     { color: #7fe3a0; }
.nav-icon-learning { color: #e3b341; }
.nav-icon-company  { color: #4fd1c5; }
.nav-icon-support  { color: #ff8a65; }
.nav-icon-reports  { color: #60a5fa; }
.nav-icon-admin    { color: #c084fc; }

.sidebar-user {
    margin: 10px; padding: 12px; border-radius: 10px;
    background: var(--sb-user-bg); border: 1px solid var(--sb-user-border);
}
.sidebar-user .name { color: var(--sb-user-name); font-weight: 600; font-size: 0.85rem; }
.sidebar-user .role { color: var(--sb-user-role); font-size: 0.75rem; text-transform: capitalize; }

.page-content { margin-left: 240px; padding: 24px; min-height: 100vh; }

.topbar {
    background: var(--tb-bg); border: 1px solid var(--tb-border);
    border-radius: 12px; padding: 14px 18px;
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 20px; box-shadow: 0 2px 8px var(--card-shadow);
}
.topbar .title { color: var(--tb-title); font-weight: 700; font-size: 1.15rem; }
.topbar .sub { color: var(--tb-sub); font-size: 0.85rem; }

.card {
    background: var(--card-bg); border: 1px solid var(--card-border);
    border-radius: 12px; padding: 18px; box-shadow: 0 2px 8px var(--card-shadow);
}

.btn-brand {
    background: var(--brand-primary); border-color: var(--brand-primary); color: #fff;
}
.btn-brand:hover { background: var(--brand-primary-d); border-color: var(--brand-primary-d); color: #fff; }

.badge-role-admin    { background: var(--badge-admin); color: #fff; }
.badge-role-hr       { background: var(--badge-hr); color: #fff; }
.badge-role-manager  { background: var(--badge-manager); color: #fff; }
.badge-role-employee { background: var(--badge-employee); color: #072711; }

.theme-toggle {
    width: 46px; height: 24px; border-radius: 999px; background: var(--toggle-track);
    position: relative; cursor: pointer; border: none;
}
.theme-toggle .thumb {
    position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%;
    background: var(--toggle-thumb); transition: left 0.15s ease;
}
[data-theme="green-dark"] .theme-toggle .thumb { left: 24px; }

@media (max-width: 860px) {
    .sidebar { width: 64px; }
    .sidebar-brand span, .sidebar-nav a span.label, .sidebar-user { display: none; }
    .page-content { margin-left: 64px; }
}