/* =========================================================
   HR System v2 — Theme
   Modern, accessible, RTL/LTR-aware, light + dark mode.
   ========================================================= */

:root{
  /* brand */
  --hr-primary:        #4f46e5;
  --hr-primary-700:    #4338ca;
  --hr-primary-100:    #eef2ff;
  --hr-accent:         #06b6d4;
  --hr-success:        #10b981;
  --hr-warning:        #f59e0b;
  --hr-danger:         #ef4444;
  --hr-info:           #3b82f6;

  /* neutrals (light) */
  --hr-bg:             #f5f7fb;
  --hr-bg-soft:        #eef2f8;
  --hr-surface:        #ffffff;
  --hr-surface-2:      #f8fafc;
  --hr-border:         #e5e7eb;
  --hr-border-soft:    #eef0f4;
  --hr-text:           #0f172a;
  --hr-text-muted:     #64748b;
  --hr-text-soft:      #94a3b8;

  /* layout */
  --hr-radius-sm:      .5rem;
  --hr-radius:         .75rem;
  --hr-radius-lg:      1rem;
  --hr-radius-xl:      1.25rem;
  --hr-shadow-sm:      0 1px 2px rgba(15,23,42,.05);
  --hr-shadow:         0 6px 20px rgba(15,23,42,.07);
  --hr-shadow-lg:      0 18px 50px rgba(15,23,42,.10);

  --hr-sidebar-w:      260px;
  --hr-topbar-h:       64px;
  --hr-transition:     200ms cubic-bezier(.2,.8,.2,1);

  --hr-font:           "Cairo","Tajawal","Segoe UI","Inter",system-ui,-apple-system,sans-serif;
}

/* dark mode */
[data-bs-theme="dark"], [data-theme="dark"]{
  --hr-bg:             #0b1020;
  --hr-bg-soft:        #0d1428;
  --hr-surface:        #131a30;
  --hr-surface-2:      #0f172a;
  --hr-border:         #233056;
  --hr-border-soft:    #1c2745;
  --hr-text:           #e6ecff;
  --hr-text-muted:     #94a3b8;
  --hr-text-soft:      #64748b;
  --hr-primary-100:    #1e1b3a;
  --hr-shadow:         0 10px 30px rgba(0,0,0,.45);
  --hr-shadow-lg:      0 22px 60px rgba(0,0,0,.55);
}

/* base */
html,body{height:100%}
body{
  font-family:var(--hr-font);
  background:var(--hr-bg);
  color:var(--hr-text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{color:var(--hr-primary);text-decoration:none}
a:hover{color:var(--hr-primary-700)}
hr{border-color:var(--hr-border-soft);opacity:1}

/* container helpers */
.hr-shell{
  display:grid;
  grid-template-columns:var(--hr-sidebar-w) 1fr;
  min-height:100vh;
}
[dir="ltr"] .hr-shell{ grid-template-columns:var(--hr-sidebar-w) 1fr; }
[dir="rtl"] .hr-shell{ grid-template-columns:1fr var(--hr-sidebar-w); }

@media (max-width: 992px){
  .hr-shell{ grid-template-columns: 1fr; }
}

/* ===== Sidebar ===== */
.hr-sidebar{
  background:var(--hr-surface);
  border-inline-end:1px solid var(--hr-border);
  position:sticky; top:0; height:100vh; overflow:auto;
  display:flex; flex-direction:column; padding:18px 14px;
  z-index:50;
  transition:transform var(--hr-transition);
}
[dir="rtl"] .hr-sidebar{ order:2; }
.hr-sidebar .brand{
  display:flex; align-items:center; gap:.7rem;
  padding:.5rem .25rem 1rem; margin-bottom:.5rem;
  border-bottom:1px solid var(--hr-border-soft);
}
.hr-sidebar .brand .logo{
  width:42px;height:42px;border-radius:14px;
  display:grid;place-items:center;color:#fff;font-size:18px;
  background:linear-gradient(135deg,var(--hr-primary),var(--hr-accent));
  box-shadow:0 8px 22px rgba(79,70,229,.35);
}
.hr-sidebar .brand .name{font-weight:800;font-size:1.05rem}
.hr-sidebar .brand .tag{font-size:.78rem;color:var(--hr-text-muted)}

.hr-nav{display:flex;flex-direction:column;gap:2px;margin-top:.5rem}
.hr-nav .group-title{
  padding:.75rem .75rem .25rem; font-size:.72rem;
  letter-spacing:.05em; text-transform:uppercase;
  color:var(--hr-text-soft);
}
.hr-nav a{
  display:flex; align-items:center; gap:.75rem;
  padding:.6rem .8rem; border-radius:var(--hr-radius);
  color:var(--hr-text); font-weight:500; font-size:.95rem;
  transition: background var(--hr-transition), color var(--hr-transition);
}
.hr-nav a i{width:20px;text-align:center;color:var(--hr-text-muted)}
.hr-nav a:hover{ background:var(--hr-surface-2); }
.hr-nav a.active{
  background:var(--hr-primary-100); color:var(--hr-primary);
}
.hr-nav a.active i{color:var(--hr-primary)}

.hr-sidebar .foot{
  margin-top:auto; padding-top:1rem;
  border-top:1px solid var(--hr-border-soft);
  font-size:.78rem; color:var(--hr-text-soft); text-align:center;
}

/* ===== Topbar ===== */
.hr-main{ display:flex; flex-direction:column; min-width:0; }
.hr-topbar{
  height:var(--hr-topbar-h);
  display:flex; align-items:center; gap:.6rem;
  padding:0 1.25rem;
  background:var(--hr-surface);
  border-bottom:1px solid var(--hr-border);
  position:sticky; top:0; z-index:40;
  backdrop-filter:saturate(140%) blur(8px);
}
.hr-topbar .search{
  flex:1; max-width:520px;
  display:flex; align-items:center; gap:.5rem;
  background:var(--hr-bg-soft); border:1px solid var(--hr-border-soft);
  border-radius:999px; padding:.45rem .9rem;
}
.hr-topbar .search input{
  background:transparent; border:0; outline:0; flex:1;
  color:var(--hr-text); font-size:.95rem;
}
.hr-topbar .actions{display:flex;align-items:center;gap:.4rem;margin-inline-start:auto}
.hr-icon-btn{
  width:40px;height:40px;border-radius:12px;
  display:grid;place-items:center;
  background:transparent;border:1px solid transparent;color:var(--hr-text-muted);
  position:relative;transition:all var(--hr-transition);
}
.hr-icon-btn:hover{background:var(--hr-bg-soft);color:var(--hr-text)}
.hr-icon-btn .dot{
  position:absolute; top:8px; inset-inline-end:8px;
  min-width:18px; height:18px; padding:0 5px; border-radius:999px;
  background:var(--hr-danger); color:#fff; font-size:.7rem;
  display:grid;place-items:center;
}

.hr-toggle{display:none}
@media (max-width: 992px){
  .hr-toggle{display:grid}
  .hr-sidebar{
    position:fixed; top:0; bottom:0; width:var(--hr-sidebar-w);
    transform: translateX(-100%);
  }
  [dir="rtl"] .hr-sidebar{ left:auto; right:0; transform: translateX(100%); }
  .hr-sidebar.open{ transform: translateX(0); box-shadow:var(--hr-shadow-lg); }
}

/* ===== Content area ===== */
.hr-content{ padding:1.5rem; }
.page-head{
  display:flex; align-items:center; gap:.75rem; flex-wrap:wrap;
  margin-bottom:1.25rem;
}
.page-head h1{font-size:1.35rem;font-weight:800;margin:0}
.page-head .crumbs{color:var(--hr-text-muted);font-size:.85rem}

/* ===== Cards ===== */
.hr-card{
  background:var(--hr-surface); border:1px solid var(--hr-border);
  border-radius:var(--hr-radius-lg); box-shadow:var(--hr-shadow-sm);
  padding:1.1rem;
}
.hr-card.hover:hover{ box-shadow:var(--hr-shadow); transform:translateY(-1px) }
.hr-card .head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:.75rem;
}
.hr-card .head h3{font-size:1rem;font-weight:700;margin:0}

/* stat tiles */
.stat-grid{
  display:grid; gap:1rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.stat-tile{
  background:var(--hr-surface); border:1px solid var(--hr-border);
  border-radius:var(--hr-radius-lg); padding:1.1rem;
  display:flex; align-items:center; gap:1rem;
  transition: transform var(--hr-transition), box-shadow var(--hr-transition);
}
.stat-tile:hover{ box-shadow:var(--hr-shadow); transform:translateY(-2px) }
.stat-tile .icon{
  width:52px;height:52px;border-radius:16px;
  display:grid;place-items:center;font-size:22px;
  background:var(--hr-primary-100); color:var(--hr-primary);
}
.stat-tile .icon.success{background:rgba(16,185,129,.12);color:var(--hr-success)}
.stat-tile .icon.warning{background:rgba(245,158,11,.13);color:var(--hr-warning)}
.stat-tile .icon.danger {background:rgba(239,68,68,.12);color:var(--hr-danger)}
.stat-tile .icon.info   {background:rgba(59,130,246,.12);color:var(--hr-info)}
.stat-tile .num{font-size:1.6rem;font-weight:800;line-height:1}
.stat-tile .lbl{color:var(--hr-text-muted);font-size:.88rem;margin-top:4px}

/* buttons */
.btn-hr{
  border-radius:var(--hr-radius); padding:.55rem 1rem;
  font-weight:600; transition:all var(--hr-transition);
  border:1px solid transparent; display:inline-flex; align-items:center; gap:.5rem;
}
.btn-hr-primary{background:var(--hr-primary);color:#fff}
.btn-hr-primary:hover{background:var(--hr-primary-700);color:#fff}
.btn-hr-soft{
  background:var(--hr-surface-2); color:var(--hr-text);
  border:1px solid var(--hr-border);
}
.btn-hr-soft:hover{background:var(--hr-bg-soft)}
.btn-hr-danger{background:var(--hr-danger);color:#fff}
.btn-hr-danger:hover{filter:brightness(.92);color:#fff}
.btn-hr-success{background:var(--hr-success);color:#fff}
.btn-hr-success:hover{filter:brightness(.92);color:#fff}

/* form inputs */
.hr-field{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1rem}
.hr-field label{font-weight:600;font-size:.9rem;color:var(--hr-text)}
.hr-input, .form-control{
  background:var(--hr-surface);
  border:1px solid var(--hr-border);
  color:var(--hr-text);
  border-radius:var(--hr-radius);
  padding:.65rem .85rem; font-size:.95rem;
  transition:border var(--hr-transition), box-shadow var(--hr-transition);
}
.hr-input:focus, .form-control:focus{
  border-color:var(--hr-primary);
  box-shadow:0 0 0 4px rgba(79,70,229,.15);
  outline:0;
}

/* alerts */
.hr-alert{
  border-radius:var(--hr-radius);
  padding:.85rem 1rem; display:flex; gap:.65rem; align-items:flex-start;
  border:1px solid transparent;
}
.hr-alert.danger { background:rgba(239,68,68,.08); color:#b42318; border-color:rgba(239,68,68,.25); }
.hr-alert.success{ background:rgba(16,185,129,.10); color:#067647; border-color:rgba(16,185,129,.25); }
.hr-alert.warning{ background:rgba(245,158,11,.10); color:#92400e; border-color:rgba(245,158,11,.30); }
.hr-alert.info   { background:rgba(59,130,246,.08); color:#1e40af; border-color:rgba(59,130,246,.25); }
[data-bs-theme="dark"] .hr-alert.danger{ color:#fecaca }
[data-bs-theme="dark"] .hr-alert.success{ color:#a7f3d0 }
[data-bs-theme="dark"] .hr-alert.warning{ color:#fde68a }
[data-bs-theme="dark"] .hr-alert.info{ color:#bfdbfe }

/* badge */
.hr-pill{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.2rem .6rem; border-radius:999px; font-size:.78rem; font-weight:600;
  background:var(--hr-bg-soft); color:var(--hr-text-muted);
  border:1px solid var(--hr-border-soft);
}
.hr-pill.success{background:rgba(16,185,129,.12);color:var(--hr-success);border-color:rgba(16,185,129,.25)}
.hr-pill.warning{background:rgba(245,158,11,.13);color:#a15c00;border-color:rgba(245,158,11,.3)}
.hr-pill.danger {background:rgba(239,68,68,.12); color:var(--hr-danger);border-color:rgba(239,68,68,.25)}
.hr-pill.info   {background:rgba(59,130,246,.12);color:var(--hr-info);border-color:rgba(59,130,246,.25)}

/* tables */
.hr-table{ width:100%; border-collapse:separate; border-spacing:0; }
.hr-table th, .hr-table td{
  padding:.75rem .9rem; text-align:start;
  border-bottom:1px solid var(--hr-border-soft);
  font-size:.92rem;
}
.hr-table th{
  font-weight:700; color:var(--hr-text-muted); font-size:.78rem;
  text-transform:uppercase; letter-spacing:.04em;
  background:var(--hr-surface-2);
}
.hr-table tbody tr:hover{ background:var(--hr-surface-2); }

/* dropdown polish */
.dropdown-menu{
  border-radius:var(--hr-radius);
  border:1px solid var(--hr-border);
  box-shadow:var(--hr-shadow);
  background:var(--hr-surface); color:var(--hr-text);
  padding:.4rem;
}
.dropdown-item{ border-radius:.5rem; padding:.5rem .65rem; color:var(--hr-text); }
.dropdown-item:hover{ background:var(--hr-bg-soft); color:var(--hr-text); }

/* utilities */
.text-muted-soft{color:var(--hr-text-muted)}
.text-soft{color:var(--hr-text-soft)}
.bg-surface{background:var(--hr-surface)}
.bg-surface-2{background:var(--hr-surface-2)}

/* ===== Auth screens ===== */
.auth-shell{
  min-height:100vh;
  display:grid; grid-template-columns: 1fr 1fr;
  background:var(--hr-bg);
}
@media (max-width: 992px){ .auth-shell{ grid-template-columns: 1fr } .auth-side{ display:none } }

.auth-side{
  position:relative; overflow:hidden; color:#fff;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.18) 0, transparent 35%),
    radial-gradient(circle at 80% 30%, rgba(255,255,255,.12) 0, transparent 30%),
    radial-gradient(circle at 40% 80%, rgba(255,255,255,.10) 0, transparent 30%),
    linear-gradient(135deg, var(--hr-primary) 0%, var(--hr-accent) 100%);
  display:flex; align-items:center; justify-content:center; padding:3rem;
}
.auth-side .blob{
  position:absolute; border-radius:50%; filter:blur(60px); opacity:.55;
  background:#fff; animation: float 16s ease-in-out infinite;
}
.auth-side .blob.b1{ width:360px;height:360px; top:-80px; inset-inline-start:-80px; animation-delay:0s }
.auth-side .blob.b2{ width:280px;height:280px; bottom:-90px; inset-inline-end:-60px; animation-delay:-6s }
@keyframes float{
  0%,100%{ transform:translate(0,0) scale(1) }
  50%   { transform:translate(20px,-30px) scale(1.08) }
}
.auth-side .card-pane{
  position:relative; z-index:2; max-width:520px;
  background:rgba(255,255,255,.08); backdrop-filter: blur(10px);
  border:1px solid rgba(255,255,255,.18);
  border-radius:var(--hr-radius-xl); padding:2rem;
}
.auth-side h2{font-size:1.6rem;font-weight:800;margin-bottom:.5rem}
.auth-side .feat{display:flex;gap:.7rem;align-items:flex-start;margin-top:1rem}
.auth-side .feat i{
  width:36px;height:36px;border-radius:10px;
  background:rgba(255,255,255,.18); display:grid;place-items:center;flex:none;
}
.auth-form-wrap{
  display:flex; align-items:center; justify-content:center; padding:2rem;
}
.auth-card{
  width:100%; max-width:440px;
  background:var(--hr-surface); border:1px solid var(--hr-border);
  border-radius:var(--hr-radius-xl); box-shadow:var(--hr-shadow);
  padding:2rem;
}
.auth-card h1{font-size:1.5rem;font-weight:800;margin-bottom:.4rem}
.auth-card .sub{color:var(--hr-text-muted); margin-bottom:1.4rem; font-size:.95rem}
.auth-card .lang-switch{
  display:flex;gap:.4rem;justify-content:flex-end;margin-bottom:1rem;
}
.auth-card .lang-switch a{
  font-size:.78rem; padding:.2rem .55rem; border-radius:999px;
  border:1px solid var(--hr-border); color:var(--hr-text-muted);
}
.auth-card .lang-switch a.active{ background:var(--hr-primary); color:#fff; border-color:var(--hr-primary) }

.input-icon{position:relative}
.input-icon i.lead{
  position:absolute; inset-inline-start:14px; top:50%; transform:translateY(-50%);
  color:var(--hr-text-soft);
}
.input-icon .form-control{ padding-inline-start:42px; }
.input-icon .toggle{
  position:absolute; inset-inline-end:8px; top:50%; transform:translateY(-50%);
  background:none; border:0; color:var(--hr-text-soft); padding:.35rem;
}

/* loading bar */
.hr-progress{
  height:3px; width:100%; overflow:hidden; background:var(--hr-border-soft);
  border-radius:999px;
}
.hr-progress > span{
  display:block; height:100%; background:linear-gradient(90deg,var(--hr-primary),var(--hr-accent));
  width:0; transition:width .3s ease;
}

/* responsive helpers */
@media (max-width:576px){
  .hr-content{ padding:1rem }
  .stat-tile .num{font-size:1.35rem}
  .auth-form-wrap{padding:1rem}
  .auth-card{padding:1.25rem;border-radius:var(--hr-radius-lg)}
}

/* Accessibility and interaction consistency */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid color-mix(in srgb, var(--hr-primary) 65%, white);
  outline-offset:2px;
}
:where(button,[role="button"],.btn,.dropdown-item){cursor:pointer}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    scroll-behavior:auto !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* print */
@media print{
  .hr-sidebar,.hr-topbar,.btn-hr,.hr-icon-btn{ display:none !important }
  body{ background:#fff }
}

/* ===== PeopleFlow 2026 enterprise polish ===== */
body{
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb,var(--hr-primary) 7%,transparent), transparent 34rem),
    var(--hr-bg);
}
.hr-content{max-width:1680px;width:100%;margin-inline:auto}
.page-head{display:flex;align-items:flex-end;gap:1rem;flex-wrap:wrap;margin-bottom:1.5rem}
.page-head h1{font-size:clamp(1.45rem,2vw,2rem);font-weight:800;letter-spacing:-.025em;margin:.15rem 0}
.eyebrow{display:inline-flex;color:var(--hr-primary);font-size:.74rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.hr-card{box-shadow:0 1px 2px rgba(15,23,42,.03),0 14px 34px rgba(15,23,42,.045)}
.hr-card.hover:hover{transform:translateY(-2px);box-shadow:0 18px 45px rgba(15,23,42,.09)}
.form-control,.form-select{min-height:44px}
.form-label,.hr-field label{margin-bottom:.4rem}
.doc-icon{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:rgba(239,68,68,.1);color:#dc2626;font-size:1.15rem}
.search-panel{display:flex;align-items:center;gap:.65rem;background:var(--hr-surface);border:1px solid var(--hr-border);border-radius:14px;padding:.35rem .4rem .35rem .8rem;margin-inline-start:auto;min-width:min(100%,360px)}
.search-panel input{border:0;outline:0;background:transparent;color:var(--hr-text);width:100%;min-width:0}
.event-code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.78rem;background:var(--hr-bg-soft);padding:.25rem .45rem;border-radius:.45rem;color:var(--hr-primary)}
.audit-meta{white-space:pre-wrap;max-width:34rem;max-height:14rem;overflow:auto;background:var(--hr-bg-soft);border:1px solid var(--hr-border);padding:.65rem;border-radius:.55rem;font-size:.75rem;margin-top:.5rem}
.nav-tabs{gap:.35rem;border:0;overflow-x:auto;flex-wrap:nowrap;padding-bottom:.4rem}
.nav-tabs .nav-link{border:1px solid var(--hr-border)!important;border-radius:10px!important;color:var(--hr-text-muted);white-space:nowrap}
.nav-tabs .nav-link.active{background:var(--hr-primary)!important;color:#fff!important;border-color:var(--hr-primary)!important}
.tab-content{background:var(--hr-surface);border:1px solid var(--hr-border)!important;border-radius:14px!important}
@media(max-width:767px){.page-head{align-items:stretch}.search-panel{margin-inline-start:0}.hr-table th,.hr-table td{padding:.65rem}.hr-content{padding:1rem}}