/* ═══════════════════════════════════════════════════════════════
   RootCode Brand Design System
   Palette:
     --rc-blue:   #0000BB  (основной синий)
     --rc-navy:   #000066  (тёмно-синий)
     --rc-light:  #D9E1FF  (светло-голубой)
     --rc-grey:   #F5F5F5  (светло-серый)
     --rc-black:  #020A0A  (почти чёрный)
   Font: Onest (400 / 500 / 600 / 700 / 800)
   ═══════════════════════════════════════════════════════════════ */

:root {
  --rc-blue:   #0000BB;
  --rc-navy:   #000066;
  --rc-light:  #D9E1FF;
  --rc-grey:   #F5F5F5;
  --rc-black:  #020A0A;

  /* UI accents (brand blue, адаптированный для тёмного фона) */
  --ac:        #2255EE;
  --ac2:       #0000BB;
  --ac-dim:    rgba(34, 85, 238, .15);
  --ac-border: rgba(34, 85, 238, .38);
  --ac-light:  #D9E1FF;
}

* { font-family: 'Onest', system-ui, sans-serif; }

/* ─── Auth page ─── */
body.auth-page {
    min-height: 100vh;
    background: linear-gradient(-45deg, #000033, #000066, #010120, #020A0A);
    background-size: 400% 400%;
    animation: gradientShift 14s ease infinite;
    display: flex;
    align-items: center;
    justify-content: center;
}

@keyframes gradientShift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ─── Glassmorphism card ─── */
.glass-card {
    background: rgba(0, 0, 40, 0.55);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(217, 225, 255, 0.12);
    border-radius: 20px;
    box-shadow: 0 8px 48px rgba(0, 0, 100, 0.4);
    padding: 2.5rem 2rem;
    width: 100%;
    max-width: 420px;
    color: #f0f0f0;
}

.glass-card .card-logo {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, var(--rc-navy), var(--rc-blue));
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    margin: 0 auto 0.75rem;
    box-shadow: 0 4px 24px rgba(0, 0, 187, 0.45);
}

.glass-card h2 {
    font-size: 1.4rem;
    font-weight: 700;
    color: #fff;
    text-align: center;
    margin-bottom: 0.25rem;
}

.glass-card .subtitle {
    text-align: center;
    font-size: 0.82rem;
    color: rgba(255,255,255,0.5);
    margin-bottom: 1.75rem;
}

/* ─── Form inputs ─── */
.glass-card .form-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(255,255,255,0.7);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 0.3rem;
}

.glass-card .form-control {
    background: rgba(217, 225, 255, 0.07);
    border: 1px solid rgba(217, 225, 255, 0.18);
    border-radius: 10px;
    color: #fff;
    padding: 0.65rem 0.9rem;
    font-size: 0.95rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.glass-card .form-control:focus {
    background: rgba(217, 225, 255, 0.12);
    border-color: var(--ac);
    box-shadow: 0 0 0 3px rgba(34, 85, 238, 0.22);
    color: #fff;
    outline: none;
}

.glass-card .form-control::placeholder {
    color: rgba(255,255,255,0.3);
}

.glass-card .input-group .btn {
    background: rgba(217, 225, 255, 0.07);
    border: 1px solid rgba(217, 225, 255, 0.18);
    border-left: none;
    color: rgba(255,255,255,0.6);
    border-radius: 0 10px 10px 0;
}

.glass-card .input-group .btn:hover {
    background: rgba(217, 225, 255, 0.14);
    color: #fff;
}

.glass-card .input-group .form-control {
    border-radius: 10px 0 0 10px;
}

/* ─── Captcha box ─── */
.captcha-box {
    background: rgba(34, 85, 238, 0.12);
    border: 1px dashed rgba(217, 225, 255, 0.35);
    border-radius: 10px;
    padding: 0.6rem 1rem;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--ac-light);
    text-align: center;
    user-select: none;
    margin-bottom: 0.4rem;
}

/* ─── Submit button ─── */
.btn-auth {
    background: linear-gradient(135deg, var(--rc-navy), var(--rc-blue));
    border: none;
    border-radius: 10px;
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
    padding: 0.7rem;
    width: 100%;
    transition: opacity 0.2s, transform 0.1s;
    box-shadow: 0 4px 20px rgba(0, 0, 187, 0.4);
    letter-spacing: 0.02em;
}

.btn-auth:hover {
    opacity: 0.88;
    transform: translateY(-1px);
    color: #fff;
}

.btn-auth:active {
    transform: translateY(0);
}

.btn-microsoft {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: #3c4043;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 9px;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.7rem;
    width: 100%;
    text-decoration: none;
    transition: box-shadow 0.2s, transform 0.1s;
}

.btn-microsoft:hover {
    box-shadow: 0 2px 12px rgba(0,0,0,.25);
    transform: translateY(-1px);
    color: #3c4043;
    text-decoration: none;
}

.btn-microsoft:active {
    transform: translateY(0);
}

/* ─── Links ─── */
.glass-card a {
    color: var(--ac-light);
    text-decoration: none;
}

.glass-card a:hover {
    color: #fff;
    text-decoration: underline;
}

.glass-card .divider {
    border-top: 1px solid rgba(217, 225, 255, 0.1);
    margin: 1.25rem 0;
}

/* ─── Alert overrides ─── */
.alert {
    border-radius: 10px;
    font-size: 0.875rem;
    padding: 0.6rem 1rem;
}

/* ─── Checkbox ─── */
.form-check-input {
    background-color: rgba(217, 225, 255, 0.08);
    border-color: rgba(217, 225, 255, 0.28);
}

.form-check-input:checked {
    background-color: var(--rc-blue);
    border-color: var(--rc-blue);
}

.form-check-label {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.65);
}

/* ─── App layout ─── */
body.app-layout {
    display: flex;
    min-height: 100vh;
    background: #080814;
    color: #e0e0e0;
}

body.main-page {
    background: #080814;
    min-height: 100vh;
    color: #e0e0e0;
}

/* ─── Role badges ─── */
.role-badge {
    font-size: 0.7rem;
    padding: 0.25em 0.6em;
    border-radius: 6px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.role-badge.admin    { background: rgba(0,0,187,.22); color: var(--ac-light);     border: 1px solid rgba(34,85,238,.4); }
.role-badge.manager  { background: rgba(0,0,102,.30); color: #aab8ff;             border: 1px solid rgba(0,0,102,.5); }
.role-badge.employee { background: rgba(217,225,255,.08); color: rgba(217,225,255,.7); border: 1px solid rgba(217,225,255,.18); }

/* ─── Sidebar ─── */
.app-sidebar {
    width: 232px;
    min-height: 100vh;
    background: rgba(0, 0, 20, 0.7);
    border-right: 1px solid rgba(217, 225, 255, 0.07);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0; left: 0; bottom: 0;
    z-index: 200;
    overflow-y: auto;
}

.app-main {
    margin-left: 232px;
    flex: 1;
    min-height: 100vh;
    overflow-x: clip;
    display: flex;
    flex-direction: column;
}

.sidebar-brand {
    padding: 1.1rem 1rem 1rem;
    border-bottom: 1px solid rgba(217, 225, 255, 0.07);
    flex-shrink: 0;
}

/* Лого: имитация RC_ из брендбука — синяя подложка */
.sidebar-brand-logo {
    width: 34px; height: 34px;
    background: var(--rc-blue);
    border-radius: 7px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 14px rgba(0, 0, 187, .45);
}

.sidebar-nav { flex: 1; padding: 0.75rem 0.65rem; }

.nav-section-label {
    font-size: 0.67rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(217, 225, 255, 0.22);
    padding: 0.9rem 0.75rem 0.3rem;
}

.nav-link-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0.75rem;
    border-radius: 9px;
    color: rgba(217, 225, 255, 0.48);
    text-decoration: none;
    font-size: 0.855rem;
    font-weight: 500;
    transition: background .15s, color .15s;
    margin-bottom: 0.1rem;
    border: none;
    background: none;
    width: 100%;
    cursor: pointer;
    text-align: left;
}

.nav-link-item i { font-size: 0.95rem; width: 1.1rem; text-align: center; flex-shrink: 0; }
.nav-link-item:hover  { background: rgba(217,225,255,.06); color: rgba(255,255,255,.85); }
.nav-link-item.active { background: rgba(0,0,187,.25); color: var(--ac-light); border-left: 2px solid var(--rc-blue); padding-left: calc(0.75rem - 2px); }
.nav-link-item.danger { color: rgba(248,113,113,0.6); }
.nav-link-item.danger:hover { background: rgba(239,68,68,0.1); color: #fca5a5; }

.sidebar-footer {
    padding: 0.75rem;
    border-top: 1px solid rgba(217, 225, 255, 0.07);
    flex-shrink: 0;
}

.sidebar-user-avatar {
    width: 32px; height: 32px;
    background: rgba(0, 0, 187, .22);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}

/* ─── Topbar ─── */
.app-topbar {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid rgba(217, 225, 255, 0.06);
    background: #0a0a18;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 20;
}

.app-topbar h1       { font-size: 1.15rem; font-weight: 700; color: #fff; margin: 0; }
.app-topbar .subtitle { font-size: 0.78rem; color: rgba(217,225,255,0.4); margin: 0; }

.page-content { padding: 1.5rem; flex: 1; }

/* ─── Modal dark ─── */
.modal-dark .modal-content {
    background: #0c0c22;
    border: 1px solid rgba(217,225,255,.1);
    border-radius: 16px;
    color: rgba(255,255,255,.82);
}
.modal-dark .modal-header { border-bottom: 1px solid rgba(217,225,255,.08); }
.modal-dark .modal-footer { border-top:    1px solid rgba(217,225,255,.08); }
.modal-dark .btn-close { filter: invert(1) grayscale(1); }

.navbar-dark-custom {
    background: rgba(0,0,20,0.6);
    border-bottom: 1px solid rgba(217,225,255,0.07);
    backdrop-filter: blur(10px);
}

/* ─── Sidebar logo ─── */
.sidebar-brand { padding: .85rem 1rem; border-bottom: 1px solid rgba(217,225,255,.07); flex-shrink: 0; }
.sidebar-logo-link { display: block; }
.sidebar-logo   { display: block; width: 100%; height: auto; max-height: 36px; object-fit: contain; object-position: left center; }

/* Dark theme: show inverted logo (white text), hide standard */
[data-theme="dark"]  .sidebar-logo-dark  { display: block; }
[data-theme="dark"]  .sidebar-logo-light { display: none; }
/* Light theme: show standard logo (black text), hide inverted */
[data-theme="light"] .sidebar-logo-light { display: block; }
[data-theme="light"] .sidebar-logo-dark  { display: none; }

/* ─── Theme toggle button labels/icons ─── */
[data-theme="dark"]  .theme-icon-light  { display: none; }
[data-theme="dark"]  .theme-icon-dark   { display: inline; }
[data-theme="dark"]  .theme-label-light { display: none; }
[data-theme="dark"]  .theme-label-dark  { display: inline; }
[data-theme="light"] .theme-icon-dark   { display: none; }
[data-theme="light"] .theme-icon-light  { display: inline; }
[data-theme="light"] .theme-label-dark  { display: none; }
[data-theme="light"] .theme-label-light { display: inline; }

/* ═══════════════════════════════════════════════════════════════
   LIGHT THEME
   ═══════════════════════════════════════════════════════════════ */
[data-theme="light"] body.app-layout { background: var(--rc-grey); color: var(--rc-black); }

[data-theme="light"] .app-sidebar {
    background: #fff;
    border-right: 1px solid rgba(0,0,0,.08);
}
[data-theme="light"] .sidebar-brand { border-bottom-color: rgba(0,0,0,.07); }
[data-theme="light"] .sidebar-footer { border-top-color: rgba(0,0,0,.07); }
[data-theme="light"] .nav-section-label { color: rgba(0,0,0,.35); }
[data-theme="light"] .nav-link-item { color: rgba(0,0,0,.55); }
[data-theme="light"] .nav-link-item:hover { background: rgba(0,0,187,.05); color: var(--rc-blue); }
[data-theme="light"] .nav-link-item.active {
    background: rgba(0,0,187,.1);
    color: var(--rc-blue);
    border-left-color: var(--rc-blue);
}
[data-theme="light"] .nav-link-item.danger { color: #dc2626; }
[data-theme="light"] .nav-link-item.danger:hover { background: rgba(220,38,38,.08); }

[data-theme="light"] .sidebar-user-avatar { background: rgba(0,0,187,.1); }
[data-theme="light"] .sidebar-user-avatar i { color: var(--rc-blue) !important; }
[data-theme="light"] .sidebar-footer .text-white { color: var(--rc-black) !important; }

[data-theme="light"] .app-topbar {
    background: #fff;
    border-bottom-color: rgba(0,0,0,.08);
}
[data-theme="light"] .app-topbar h1       { color: var(--rc-black); }
[data-theme="light"] .app-topbar .subtitle { color: rgba(0,0,0,.45); }
[data-theme="light"] .app-topbar strong   { color: var(--rc-blue) !important; }

[data-theme="light"] .role-badge.admin    { background: rgba(0,0,187,.1); color: var(--rc-blue); border-color: rgba(0,0,187,.25); }
[data-theme="light"] .role-badge.manager  { background: rgba(0,0,102,.08); color: var(--rc-navy); border-color: rgba(0,0,102,.2); }
[data-theme="light"] .role-badge.employee { background: rgba(0,0,0,.05); color: rgba(0,0,0,.5); border-color: rgba(0,0,0,.12); }

[data-theme="light"] .modal-dark .modal-content { background: #fff; border-color: rgba(0,0,0,.1); color: var(--rc-black); }
[data-theme="light"] .modal-dark .modal-header  { border-bottom-color: rgba(0,0,0,.08); }
[data-theme="light"] .modal-dark .modal-footer  { border-top-color: rgba(0,0,0,.08); }
[data-theme="light"] .modal-dark .modal-title   { color: var(--rc-black) !important; }
[data-theme="light"] .modal-dark .btn-close     { filter: none; }

/* ─── Light theme: employees table ─── */
[data-theme="light"] .emp-table thead th {
    background: #fff;
    color: rgba(0,0,0,.5);
    border-bottom-color: rgba(0,0,0,.08);
}
[data-theme="light"] .emp-table tbody tr { border-bottom-color: rgba(0,0,0,.05); }
[data-theme="light"] .emp-table tbody tr:hover { background: rgba(0,0,187,.04); }
[data-theme="light"] .emp-table td { color: var(--rc-black); }
[data-theme="light"] .table-wrap {
    background: #fff;
    border-color: rgba(0,0,0,.08);
}
[data-theme="light"] .search-input {
    background: rgba(0,0,0,.04);
    border-color: rgba(0,0,0,.12);
    color: var(--rc-black);
}
[data-theme="light"] .search-input:focus { border-color: var(--rc-blue); background: #fff; }
[data-theme="light"] .search-input::placeholder { color: rgba(0,0,0,.3); }
[data-theme="light"] .ctrl-btn {
    background: rgba(0,0,0,.04);
    border-color: rgba(0,0,0,.12);
    color: rgba(0,0,0,.65);
}
[data-theme="light"] .ctrl-btn:hover { background: rgba(0,0,0,.08); color: var(--rc-black); }
[data-theme="light"] .dept-badge { background: rgba(0,0,187,.1); color: var(--rc-navy); }
[data-theme="light"] .cell-empty { color: rgba(0,0,0,.25); }
[data-theme="light"] td.col-num { color: rgba(0,0,0,.3); }
[data-theme="light"] .col-picker-panel {
    background: #fff;
    border-color: rgba(0,0,0,.1);
}
[data-theme="light"] .col-row label { color: rgba(0,0,0,.7); }
[data-theme="light"] .col-row:hover { background: rgba(0,0,187,.04); }
[data-theme="light"] .page-btn { color: rgba(0,0,0,.45); background: rgba(0,0,0,.03); border-color: rgba(0,0,0,.1); }
[data-theme="light"] .page-btn:hover,
[data-theme="light"] .page-btn.active { background: rgba(0,0,187,.1); color: var(--rc-blue); border-color: rgba(0,0,187,.3); }

/* ─── Light theme: orgchart ─── */
[data-theme="light"] .chart-vp {
    background:
      repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(0,0,0,.04) 40px),
      repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(0,0,0,.04) 40px);
}
[data-theme="light"] .org-card {
    background: #fff;
    border-color: rgba(0,0,0,.1);
}
[data-theme="light"] .org-card:hover { border-color: rgba(0,0,187,.35); }
[data-theme="light"] .c-name  { color: var(--rc-black); }
[data-theme="light"] .c-title { color: rgba(0,0,0,.45); }
[data-theme="light"] .c-dept  { color: rgba(0,0,0,.35); }
[data-theme="light"] .c-email { color: var(--rc-blue); }
[data-theme="light"] .tb-btn  { background: rgba(0,0,0,.05); border-color: rgba(0,0,0,.12); color: rgba(0,0,0,.6); }
[data-theme="light"] .tb-btn:hover { background: rgba(0,0,0,.1); color: var(--rc-black); }
[data-theme="light"] .z-btn   { background: rgba(255,255,255,.9); border-color: rgba(0,0,0,.12); color: rgba(0,0,0,.55); }
[data-theme="light"] .z-btn:hover { background: rgba(0,0,187,.08); color: var(--rc-blue); border-color: rgba(0,0,187,.25); }
[data-theme="light"] .chart-topbar h1 { color: var(--rc-black); }
[data-theme="light"] .chart-topbar .sub { color: rgba(0,0,0,.4); }