/* Graphilence Team Hub 2.0 visual refresh
   UI-only layer. Existing data, permissions, AJAX, and live-sync logic remain unchanged. */

:root{
  --gth-bg:#f6f7fb;
  --gth-surface:#ffffff;
  --gth-surface-2:#f9fafc;
  --gth-surface-3:#f1f4f8;
  --gth-text:#182234;
  --gth-heading:#111827;
  --gth-muted:#68758a;
  --gth-border:#e4e8ef;
  --gth-border-strong:#d7dde7;
  --gth-success:#16865b;
  --gth-warning:#b97810;
  --gth-danger:#c53e45;
  --gth-info:#2877d3;
  --gth-radius-sm:10px;
  --gth-radius:16px;
  --gth-radius-lg:22px;
  --gth-shadow-xs:0 1px 2px rgba(15,23,42,.03);
  --gth-shadow-sm:0 8px 22px rgba(15,23,42,.055);
  --gth-shadow:0 18px 45px rgba(15,23,42,.075);
  --gth-focus:0 0 0 4px rgba(var(--gth-accent-rgb,224,82,82),.14);
}

html{scroll-behavior:smooth}
body.gth-dashboard-page{background:var(--gth-bg)!important;color:var(--gth-text)!important}
.gth-app,.gth-login-shell,.gth-access-card{
  font-family:var(--gth-font,"Archivo",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif);
  color:var(--gth-text);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.gth-app{grid-template-columns:272px minmax(0,1fr);background:
  radial-gradient(circle at 92% 4%,rgba(var(--gth-accent-rgb,224,82,82),.07),transparent 24rem),
  var(--gth-bg)}

/* Sidebar */
.gth-sidebar{
  width:272px;
  padding:22px 16px 18px;
  background:
    radial-gradient(circle at 25% 0%,rgba(255,255,255,.12),transparent 17rem),
    linear-gradient(165deg,var(--gth-navy) 0%,#102941 100%);
  border-right:1px solid rgba(255,255,255,.08);
  box-shadow:18px 0 48px rgba(15,35,55,.12);
}
.gth-brand{
  padding:4px 8px 22px;
  border-bottom:1px solid rgba(255,255,255,.11);
  gap:13px;
}
.gth-logo-mark{
  width:44px;height:44px;border-radius:14px;
  background:linear-gradient(145deg,var(--gth-accent),#f06d65);
  box-shadow:0 10px 26px rgba(var(--gth-accent-rgb,224,82,82),.28),inset 0 1px 0 rgba(255,255,255,.3);
  font-size:20px;
}
.gth-brand strong{font-size:15px;letter-spacing:-.01em}
.gth-brand small{font-size:12px;opacity:.62}
.gth-nav{gap:5px;padding-top:22px}
.gth-nav-item{
  min-height:46px;
  position:relative;
  display:flex;
  align-items:center;
  border-radius:12px;
  padding:12px 14px 12px 18px;
  color:rgba(255,255,255,.68);
  font-size:14px;
  font-weight:620;
  letter-spacing:-.005em;
  transition:background .18s ease,color .18s ease,transform .18s ease;
}
.gth-nav-item:before{
  content:"";
  width:7px;height:7px;border-radius:999px;
  margin-right:12px;
  background:rgba(255,255,255,.28);
  box-shadow:0 0 0 4px rgba(255,255,255,.035);
  transition:.18s ease;
}
.gth-nav-item:hover{background:rgba(255,255,255,.075);color:#fff;transform:translateX(2px)}
.gth-nav-item.is-active{
  color:#fff;
  background:linear-gradient(90deg,rgba(255,255,255,.16),rgba(255,255,255,.09));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 8px 20px rgba(0,0,0,.08);
}
.gth-nav-item.is-active:before{background:var(--gth-accent);box-shadow:0 0 0 5px rgba(var(--gth-accent-rgb,224,82,82),.17)}
.gth-sidebar-bottom{padding:16px 8px 2px;gap:12px}
.gth-sidebar-bottom a{font-size:12px;display:flex;align-items:center;min-height:28px}

/* Main shell and top bar */
.gth-main{grid-column:2;padding:0 36px 70px}
.gth-topbar{
  min-height:88px;
  position:sticky;
  top:0;
  z-index:24;
  margin:0 -36px;
  padding:0 36px;
  background:rgba(246,247,251,.88);
  backdrop-filter:blur(16px) saturate(145%);
  -webkit-backdrop-filter:blur(16px) saturate(145%);
  border-bottom:1px solid rgba(215,221,231,.78);
}
.gth-topbar h1{font-size:23px;letter-spacing:-.025em;color:var(--gth-heading)}
.gth-eyebrow,.gth-section-kicker{font-size:12px;letter-spacing:.15em}
.gth-user-chip{
  padding:7px 10px 7px 7px;
  border:1px solid rgba(215,221,231,.9);
  background:rgba(255,255,255,.76);
  border-radius:999px;
  box-shadow:var(--gth-shadow-xs);
}
.gth-user-chip img{width:38px;height:38px;border:2px solid #fff;box-shadow:0 2px 8px rgba(15,23,42,.12)}
.gth-user-chip strong{font-size:13px;color:var(--gth-heading)}
.gth-user-chip small{font-size:12px}
.gth-view{padding-top:34px;max-width:1540px;margin:0 auto}
.gth-welcome-row,.gth-section-title{margin-bottom:26px;align-items:center}
.gth-welcome-row h2,.gth-section-title h2{font-size:30px;letter-spacing:-.035em;color:var(--gth-heading);line-height:1.15}
.gth-welcome-row p,.gth-section-title p{font-size:14px;line-height:1.55}
.gth-date{
  background:#fff;border:1px solid var(--gth-border);border-radius:999px;
  padding:8px 12px;font-size:12px;box-shadow:var(--gth-shadow-xs)
}

/* Cards and content hierarchy */
.gth-card,.gth-kpi,.gth-project-card,.gth-team-card,.gth-assignment-card,.gth-access-card{
  border:1px solid rgba(222,228,237,.92);
  box-shadow:var(--gth-shadow-sm);
}
.gth-card{
  border-radius:var(--gth-radius-lg);
  padding:24px;
  background:rgba(255,255,255,.98);
}
.gth-card:hover{border-color:var(--gth-border-strong)}
.gth-card-head{margin-bottom:20px;align-items:center}
.gth-card-head h3{font-size:19px;letter-spacing:-.02em;color:var(--gth-heading)}
.gth-section-kicker{color:var(--gth-accent);margin-bottom:7px}
.gth-grid{gap:22px}.gth-grid-wide{grid-template-columns:minmax(0,1fr) 350px}.gth-grid-two{gap:22px}
.gth-setup-banner{
  border-radius:18px;
  padding:18px 20px;
  background:linear-gradient(135deg,rgba(var(--gth-accent-rgb,224,82,82),.085),rgba(255,255,255,.94));
  border:1px solid rgba(var(--gth-accent-rgb,224,82,82),.22);
  box-shadow:var(--gth-shadow-xs)
}

/* KPI cards */
.gth-kpi-grid{gap:18px;margin-bottom:22px}
.gth-kpi{
  min-height:154px;
  padding:20px 20px 18px;
  border-radius:20px;
  overflow:hidden;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.gth-kpi:hover{transform:translateY(-2px);box-shadow:var(--gth-shadow)}
.gth-kpi:before{width:100%;height:4px;bottom:auto;background:linear-gradient(90deg,#2d7dd2,#63a7ef)}
.gth-kpi:after{
  content:"";position:absolute;right:-18px;top:-24px;width:96px;height:96px;border-radius:50%;
  background:rgba(45,125,210,.07)
}
.gth-kpi:nth-child(3):before{background:linear-gradient(90deg,#c67d0a,#efb34f)}
.gth-kpi:nth-child(3):after{background:rgba(217,145,25,.08)}
.gth-kpi.is-alert:before{background:linear-gradient(90deg,var(--gth-accent),#f07a73)}
.gth-kpi.is-alert:after{background:rgba(var(--gth-accent-rgb,224,82,82),.075)}
.gth-kpi span{font-size:12px;color:var(--gth-muted)}
.gth-kpi strong{font-size:38px;letter-spacing:-.055em;margin:16px 0 7px;color:var(--gth-heading)}
.gth-kpi small{font-size:12px}

/* Buttons and interactive controls */
.gth-button{
  min-height:42px;
  padding:10px 16px;
  border-radius:12px;
  border-color:var(--gth-accent);
  background:linear-gradient(145deg,var(--gth-accent),#ee6a63);
  box-shadow:0 8px 18px rgba(var(--gth-accent-rgb,224,82,82),.20),inset 0 1px 0 rgba(255,255,255,.24);
  font-size:12px;
  font-weight:760;
  transition:transform .16s ease,box-shadow .16s ease,filter .16s ease;
}
.gth-button:hover{filter:none;transform:translateY(-1px);box-shadow:0 11px 24px rgba(var(--gth-accent-rgb,224,82,82),.25)}
.gth-button:active{transform:translateY(0)}
.gth-button-secondary{
  background:#fff;
  color:var(--gth-text)!important;
  border-color:var(--gth-border-strong);
  box-shadow:0 3px 10px rgba(15,23,42,.045)
}
.gth-button-secondary:hover{background:var(--gth-surface-2);box-shadow:0 5px 13px rgba(15,23,42,.07)}
.gth-text-button{font-size:12px;border-radius:8px;padding:7px 9px;transition:background .16s ease}
.gth-text-button:hover{background:rgba(var(--gth-accent-rgb,224,82,82),.075)}
.gth-menu-toggle{font-weight:700;color:var(--gth-text)}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none!important;box-shadow:var(--gth-focus)!important}

/* Forms */
.gth-card input,.gth-card select,.gth-card textarea,.gth-modal input,.gth-modal select,.gth-modal textarea,
.gth-filter-row input,.gth-filter-row select{
  min-height:43px;
  border:1px solid var(--gth-border-strong);
  border-radius:12px;
  padding:10px 13px;
  background:#fff;
  box-shadow:inset 0 1px 2px rgba(15,23,42,.025);
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease;
}
.gth-card textarea,.gth-modal textarea{min-height:108px;line-height:1.55;resize:vertical}
.gth-card input:hover,.gth-card select:hover,.gth-card textarea:hover,.gth-modal input:hover,.gth-modal select:hover,.gth-modal textarea:hover{border-color:#c8d0dc}
.gth-card input:focus,.gth-card select:focus,.gth-card textarea:focus,.gth-modal input:focus,.gth-modal select:focus,.gth-modal textarea:focus{
  border-color:var(--gth-accent);box-shadow:var(--gth-focus)
}
.gth-label,.gth-form-stack label>span,.gth-inline-fields label span{font-size:12px;letter-spacing:.01em;color:#39465a}
.gth-segmented,.gth-status-buttons{padding:4px;border:1px solid var(--gth-border);border-radius:13px;background:var(--gth-surface-3);width:max-content;max-width:100%}
.gth-segmented button,.gth-status-buttons button{border:0;background:transparent;border-radius:9px;padding:8px 12px;color:#586579}
.gth-segmented button.is-selected,.gth-status-buttons button.is-selected{background:var(--gth-navy);box-shadow:0 5px 12px rgba(var(--gth-navy-rgb,23,50,77),.18)}
.gth-time-grid{gap:11px}
.gth-time-grid>div{background:linear-gradient(180deg,#fbfcfe,#f6f8fb);border-radius:14px;padding:16px}
.gth-time-grid strong{font-size:21px;letter-spacing:-.025em;color:var(--gth-heading)}

/* Tables */
.gth-table-wrap{
  border:1px solid var(--gth-border);
  border-radius:15px;
  background:#fff;
  scrollbar-width:thin;
  scrollbar-color:#cdd5df transparent;
}
.gth-table{min-width:820px}
.gth-table thead{background:#f8fafc}
.gth-table th{
  position:sticky;top:0;z-index:1;
  padding:12px 14px;
  background:#f8fafc;
  color:#647186;
  font-size:12px;
  letter-spacing:.075em;
  border-bottom:1px solid var(--gth-border)
}
.gth-table td{padding:14px;border-bottom:1px solid #edf0f4;font-size:12px}
.gth-table tbody tr{transition:background .14s ease}
.gth-table tbody tr:hover{background:#fafbfe}
.gth-person img{width:38px;height:38px;object-fit:cover;border:2px solid #fff;box-shadow:0 2px 8px rgba(15,23,42,.1)}
.gth-person strong{font-size:12px;color:var(--gth-heading)}
.gth-cell-sub{margin-top:4px}

/* Status, progress, chips */
.gth-status,.gth-priority,.gth-role-badge,.gth-late-badge{
  border:1px solid transparent;
  font-weight:780;
  letter-spacing:.005em;
}
.gth-status{padding:6px 9px}
.gth-status-in-office,.gth-status-remote{border-color:#cdebdc}
.gth-status-meeting{border-color:#d3e3fa}
.gth-status-break,.gth-status-pending{border-color:#f1dfb3}
.gth-status-approved{border-color:#bee5d1}
.gth-status-rejected,.gth-late-badge.is-visible{border-color:#efc7c7}
.gth-progress{height:8px;background:#e8edf3}
.gth-progress i{background:linear-gradient(90deg,var(--gth-accent),#ef786f);box-shadow:0 0 8px rgba(var(--gth-accent-rgb,224,82,82),.18)}
.gth-progress-cell{min-width:125px}

/* Overview and activity */
.gth-activity-card{background:linear-gradient(180deg,#fff,#fbfcfe)}
.gth-activity-list{gap:0}
.gth-activity{position:relative;grid-template-columns:18px 1fr;gap:8px;padding:0 0 19px}
.gth-activity:not(:last-child):after{content:"";position:absolute;left:4px;top:15px;bottom:0;width:1px;background:#e6eaf0}
.gth-activity>span{width:9px;height:9px;margin-top:4px;z-index:1;box-shadow:0 0 0 5px rgba(var(--gth-accent-rgb,224,82,82),.10)}
.gth-activity p{font-size:12px;color:#364255}
.gth-activity small{font-size:12px}
.gth-project-strip{gap:15px}
.gth-project-mini,.gth-assignment-card{
  border-radius:16px;
  background:linear-gradient(180deg,#fff,#fafbfd);
  padding:17px;
  box-shadow:var(--gth-shadow-xs);
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.gth-project-mini:hover,.gth-assignment-card:hover{transform:translateY(-2px);border-color:#ccd4df;box-shadow:var(--gth-shadow-sm)}

/* Projects */
.gth-filter-row{grid-template-columns:minmax(0,1fr) 230px;gap:12px;margin-bottom:20px}
.gth-project-grid{gap:20px}
.gth-project-card{
  border-radius:20px;
  padding:21px;
  background:linear-gradient(180deg,#fff 0%,#fcfdff 100%);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.gth-project-card:hover{transform:translateY(-3px);box-shadow:var(--gth-shadow);border-color:#cdd5e0}
.gth-project-card h3{letter-spacing:-.02em;color:var(--gth-heading)}
.gth-code{display:inline-flex;padding:5px 8px;border-radius:8px;background:var(--gth-surface-3);color:#556277;font-size:12px;font-weight:760}
.gth-project-meta{gap:9px}
.gth-project-meta>div{padding:12px;border-radius:12px;background:#f7f9fc;border:1px solid #edf0f4}
.gth-project-actions{padding-top:15px;border-top:1px solid #edf0f4}
.gth-project-actions a,.gth-project-actions button{border-radius:8px;padding:7px 9px}
.gth-next-step p{line-height:1.5}

/* Attendance and reports */
.gth-subnav{
  width:100%;
  padding:5px;
  border:1px solid var(--gth-border);
  background:#edf1f6;
  border-radius:14px;
  gap:4px;
  margin-bottom:22px;
}
.gth-subnav button{flex:0 1 auto;padding:10px 14px;border-radius:10px;transition:.16s ease}
.gth-subnav button:hover{color:var(--gth-heading);background:rgba(255,255,255,.45)}
.gth-subnav button.is-active{box-shadow:0 5px 14px rgba(15,23,42,.08);color:var(--gth-heading)}
.gth-report-toolbar{padding-bottom:20px;border-bottom:1px solid var(--gth-border)}
.gth-report-filters{padding:5px;background:#f5f7fa;border:1px solid var(--gth-border);border-radius:14px}
.gth-report-filters input,.gth-report-filters select{min-height:40px;background:#fff}
.gth-report-snapshot>div{border:1px solid var(--gth-border);background:linear-gradient(180deg,#fafbfd,#f4f7fa);border-radius:13px}
.gth-report-snapshot strong{letter-spacing:-.03em;color:var(--gth-heading)}
.gth-rule-list>div{border-radius:13px;background:#fafbfd;padding:13px 14px}

/* Team */
.gth-team-grid{gap:20px}
.gth-team-card{
  border-radius:20px;
  padding:19px;
  background:linear-gradient(180deg,#fff,#fafbfd);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.gth-team-card:hover{transform:translateY(-3px);box-shadow:var(--gth-shadow);border-color:#cfd7e2}
.gth-team-card-top img{border-radius:16px;box-shadow:0 5px 16px rgba(15,23,42,.12)}
.gth-member-heading h3{font-size:17px;letter-spacing:-.02em}
.gth-role-badge{background:#eef3f8;border-color:#dce4ec}
.gth-member-actions{gap:4px}
.gth-member-actions .gth-text-button{padding:7px 8px}
.gth-profile-photo-field{border-radius:16px;background:#fafbfd}

/* Assignment builder */
.gth-assignment-builder{display:grid;gap:10px}
.gth-assignment-row{
  padding:10px;
  border:1px solid var(--gth-border);
  border-radius:15px;
  background:#f8fafc;
  align-items:center;
}
.gth-assignment-row input,.gth-assignment-row select{background:#fff}
.gth-remove-assignment{border-radius:10px!important}

/* Modals and toasts */
.gth-modal{background:rgba(10,18,29,.52);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.gth-modal-panel{
  border-radius:22px;
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 30px 80px rgba(5,13,24,.26);
  padding:26px;
}
.gth-modal-head{padding-bottom:16px;margin-bottom:18px;border-bottom:1px solid var(--gth-border)}
.gth-modal-head h2{letter-spacing:-.025em;color:var(--gth-heading)}
.gth-modal-close{border-radius:10px;background:#f2f4f7}
.gth-modal-actions{padding-top:18px;margin-top:20px;border-top:1px solid var(--gth-border)}
.gth-toast{
  left:auto;right:28px;top:98px;
  max-width:min(420px,calc(100vw - 32px));
  border-radius:14px;
  box-shadow:0 18px 42px rgba(15,23,42,.18)
}
.gth-removal-option{border-radius:16px;background:#fbfcfe}

/* Empty states */
.gth-empty-state,.gth-empty-inline,.gth-empty-mini{color:var(--gth-muted)}
.gth-empty-state{border:1px dashed #cfd7e2;border-radius:18px;padding:34px;background:rgba(255,255,255,.6)}

/* Login */
.gth-login-shell{background:var(--gth-bg)}
.gth-login-panel{background:#fff}
.gth-login-brand{margin-bottom:34px}
.gth-login-panel h1{font-size:38px;letter-spacing:-.045em;color:var(--gth-heading)}
.gth-login-panel p{line-height:1.6}
.gth-login-panel input{border-radius:12px;min-height:46px;border-color:var(--gth-border-strong)}
.gth-login-visual{
  background:
    radial-gradient(circle at 82% 15%,rgba(var(--gth-accent-rgb,224,82,82),.25),transparent 20rem),
    linear-gradient(145deg,var(--gth-navy),#10283f);
}
.gth-login-visual h2{font-size:45px;letter-spacing:-.045em;line-height:1.05}
.gth-login-visual li{border-bottom:1px solid rgba(255,255,255,.12);padding:13px 0}

/* Responsive */
@media(max-width:1280px){
  .gth-app{grid-template-columns:250px minmax(0,1fr)}
  .gth-sidebar{width:250px}
  .gth-main{padding-left:28px;padding-right:28px}
  .gth-topbar{margin-left:-28px;margin-right:-28px;padding-left:28px;padding-right:28px}
  .gth-grid-wide{grid-template-columns:1fr}
}
@media(max-width:900px){
  .gth-main{padding:0 16px 44px}
  .gth-topbar{margin:0 -16px;padding:0 16px;min-height:74px}
  .gth-view{padding-top:24px}
  .gth-card{padding:19px;border-radius:18px}
  .gth-welcome-row h2,.gth-section-title h2{font-size:25px}
  .gth-menu-toggle{display:inline-flex;min-height:38px;align-items:center;background:#fff;border-radius:11px}
  .gth-sidebar{width:264px}
}
@media(max-width:620px){
  .gth-main{padding-bottom:30px}
  .gth-topbar h1{font-size:19px}
  .gth-user-chip{padding:4px;border:0;background:transparent;box-shadow:none}
  .gth-user-chip img{width:36px;height:36px}
  .gth-welcome-row h2,.gth-section-title h2{font-size:24px}
  .gth-date{display:inline-flex;margin-top:10px}
  .gth-kpi{min-height:130px;padding:18px}
  .gth-kpi strong{font-size:33px}
  .gth-card{padding:16px;border-radius:16px}
  .gth-card-head{align-items:flex-start}
  .gth-subnav{display:grid;grid-template-columns:repeat(2,1fr)}
  .gth-subnav button{width:100%;padding:9px 7px}
  .gth-segmented,.gth-status-buttons{width:100%}
  .gth-segmented button,.gth-status-buttons button{flex:1 1 auto}
  .gth-report-filters{padding:8px}
  .gth-toast{right:16px;top:82px}
  .gth-modal-panel{padding:20px 15px;border-radius:18px}
}

/* Reduced motion and accessibility */
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}
@media(prefers-contrast:more){
  :root{--gth-border:#b8c1cd;--gth-border-strong:#9aa7b6}
  .gth-card,.gth-kpi,.gth-project-card,.gth-team-card{box-shadow:none}
}

.gth-logo-mark-image{overflow:hidden;background:#fff!important;padding:0!important}.gth-logo-mark-image img{width:100%;height:100%;display:block;object-fit:cover;border-radius:inherit}