/* HIBA One Premium UX Layer v0.22.0
 * Goal: calm premium feel, safer edge spacing, immediate tactile feedback,
 * and deliberate desktop / tablet / mobile experiences.
 * Presentation only. No business logic.
 */
:root{
  --ux-page-gutter:32px;
  --ux-card-gutter:20px;
  --ux-control-press:translateY(1px) scale(.985);
  --ux-control-ease:120ms cubic-bezier(.2,.8,.2,1);
  --ux-focus-ring:0 0 0 3px rgba(21,94,239,.14);
}

/* Consistent breathing room. Never let primary content stick to the viewport edge. */
.app-content{padding-left:max(var(--ux-page-gutter),env(safe-area-inset-left));padding-right:max(var(--ux-page-gutter),env(safe-area-inset-right))}
.page-heading,.panel-heading,.panel-body,.security-card-body,.empty-row,.action-list-row,.dashboard-class-row,.settings-hub-card{scroll-margin-top:84px}
.panel>.panel-body,.security-card-body,.compact-form,.form-panel-body{padding-left:var(--ux-card-gutter);padding-right:var(--ux-card-gutter)}
.data-table th:first-child,.data-table td:first-child{padding-left:20px}
.data-table th:last-child,.data-table td:last-child{padding-right:20px}
.table-scroll,.table-wrap,.data-table-wrap,.student-table-wrap,.finance-table-wrap{scroll-padding-inline:20px}

/* Tactile feedback: every control acknowledges the user's touch/click instantly. */
.button,.icon-button,.quick-add,.search-button,.workspace-switcher__button,.workspace-menu button,.workspace-menu a,.nav-item,.mobile-bottom-nav a,.mobile-bottom-nav button,.auth-link-button,[role="button"]{
  -webkit-tap-highlight-color:transparent;
  transition:transform var(--ux-control-ease),background-color 150ms ease,border-color 150ms ease,color 150ms ease,box-shadow 150ms ease,opacity 150ms ease;
  transform-origin:center;
}
.button:active,.icon-button:active,.quick-add:active,.search-button:active,.workspace-switcher__button:active,.workspace-menu button:active,.workspace-menu a:active,.nav-item:active,.mobile-bottom-nav a:active,.mobile-bottom-nav button:active,.auth-link-button:active,[role="button"]:active{
  transform:var(--ux-control-press);
}
.button--primary:active,.quick-add:active{background:var(--blue2);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.button--secondary:active,.search-button:active,.workspace-switcher__button:active{background:var(--subtle);border-color:var(--blueBorder)}
.nav-item:active{background:var(--blueLight)}

/* Keyboard users get the same clarity without visual noise. */
.button:focus-visible,.icon-button:focus-visible,.quick-add:focus-visible,.search-button:focus-visible,.workspace-switcher__button:focus-visible,.nav-item:focus-visible,.mobile-bottom-nav a:focus-visible,.mobile-bottom-nav button:focus-visible,.auth-link-button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:none;
  box-shadow:var(--ux-focus-ring);
}

/* Premium control feel without unnecessary shadow. */
.button,.quick-add,.search-button,.workspace-switcher__button{font-weight:650}
.button:not(:disabled),.icon-button:not(:disabled),.search-button:not(:disabled),.workspace-switcher__button:not(:disabled){touch-action:manipulation}
.button:disabled,[aria-disabled="true"]{transform:none!important}
.workspace-avatar{overflow:hidden}.workspace-avatar img{width:100%;height:100%;object-fit:contain;background:var(--surface);padding:3px}

/* Header controls: real menus, clear hit areas, no dead-looking icons. */
.topbar-actions{position:relative}.quick-add{border:0;cursor:pointer}.topbar-notification,.topbar-account,.quick-add{transition:transform 120ms cubic-bezier(.2,.8,.2,1),background-color 150ms ease,color 150ms ease,box-shadow 150ms ease}.search-button kbd{font:600 11px/1 var(--fontB);color:var(--muted);border:1px solid var(--soft);background:var(--subtleAlt);border-radius:6px;padding:4px 6px}.topbar-notification,.topbar-account{min-width:40px;height:40px;border:0;background:transparent;border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--text2);position:relative;cursor:pointer}.topbar-notification:hover,.topbar-account:hover{background:var(--subtle)}.topbar-notification:active,.topbar-account:active{transform:translateY(1px) scale(.985)}.topbar-notification b{position:absolute;right:2px;top:1px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:var(--danger);color:#fff;font:700 10px/17px var(--fontB);text-align:center}.topbar-account{width:auto;padding:0 4px 0 2px;gap:4px}.topbar-account__chevron{font-size:13px;color:var(--muted)}.topbar-menu-wrap{position:relative}.topbar-menu{position:absolute;right:0;top:calc(100% + 8px);width:300px;background:var(--surface);border:1px solid var(--soft);border-radius:12px;box-shadow:0 8px 24px rgba(8,20,38,.08);padding:6px;z-index:90}.topbar-menu__heading{padding:10px 10px 8px}.topbar-menu__heading strong,.topbar-menu__heading small{display:block}.topbar-menu__heading small{font-size:12px;color:var(--muted);margin-top:2px}.topbar-menu>a{min-height:48px;padding:9px 10px;border-radius:9px;display:flex;align-items:center;gap:10px}.topbar-menu>a:hover{background:var(--subtle)}.topbar-menu>a:active{background:var(--blueLight);transform:translateY(1px) scale(.99)}.topbar-menu>a>span:first-child{width:34px;height:34px;display:grid;place-items:center;border-radius:9px;background:var(--subtleAlt);color:var(--text2);flex:0 0 34px}.topbar-menu>a strong,.topbar-menu>a small{display:block}.topbar-menu>a small{font-size:12px;color:var(--muted);margin-top:1px}.topbar-menu__divider{height:1px;background:var(--soft);margin:5px}.account-menu__identity{display:grid;grid-template-columns:38px 1fr;gap:10px;align-items:center;padding:10px;border-bottom:1px solid var(--soft);margin-bottom:5px}.account-menu__identity strong,.account-menu__identity small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.account-menu__identity small{font-size:12px;color:var(--muted);margin-top:2px}.account-menu>a{display:block;padding:10px 11px}.topbar-menu__danger{color:var(--danger)!important}.header-search-overlay{position:fixed;inset:0;background:rgba(8,20,38,.3);display:grid;place-items:start center;padding:10vh 16px 16px;z-index:200}.header-search-overlay .global-search-dialog{width:min(680px,100%);background:var(--surface);border:1px solid var(--soft);border-radius:16px;box-shadow:0 8px 24px rgba(8,20,38,.08);overflow:hidden}.header-search-overlay .global-search-input{display:grid;grid-template-columns:24px 1fr 40px;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--soft)}.header-search-overlay .global-search-input input{height:44px;border:0;outline:0;background:transparent;min-width:0}.header-search-overlay .global-search-input button{width:38px;height:38px;border:0;background:transparent;border-radius:9px;cursor:pointer}.header-search-overlay .global-search-input button:hover{background:var(--subtle)}.header-search-overlay .global-search-results{max-height:min(60vh,520px);overflow:auto;padding:6px}.header-search-overlay .global-search-row{min-height:56px;padding:9px 10px;border-radius:9px;display:flex;justify-content:space-between;gap:14px;align-items:center}.header-search-overlay .global-search-row:hover{background:var(--subtle)}.header-search-overlay .global-search-row strong,.header-search-overlay .global-search-row small{display:block}.header-search-overlay .global-search-row small{font-size:12px;color:var(--muted);margin-top:2px}.header-search-overlay .global-search-row b{font-size:11px;color:var(--muted);font-weight:600}.header-search-overlay .global-search-hint{padding:18px;color:var(--muted);font-size:14px}
@media(max-width:767px){.search-button kbd,.topbar-account__chevron{display:none}.topbar-menu{position:fixed;left:12px;right:12px;top:auto;bottom:calc(78px + env(safe-area-inset-bottom));width:auto;max-height:68vh;overflow:auto}.header-search-overlay{padding-top:8vh}.header-search-overlay .global-search-dialog{border-radius:14px}.topbar-account{padding:0}.topbar-actions{gap:2px}}
@media(min-width:768px) and (max-width:1023px){.search-button kbd{display:none}.topbar-menu{width:280px}}

/* Tables remain dense, but rows are easier to scan and tap. */
.data-table tbody tr{transition:background-color 120ms ease}
.data-table tbody tr:hover{background:var(--subtleAlt)}
.data-table td{min-height:56px}

/* Responsive contract: each device family gets its own deliberate layout. */
@media(min-width:1440px){
  :root{--ux-page-gutter:32px;--ux-card-gutter:20px}
  .app-content{max-width:1600px;padding-top:32px}
  .page-heading{margin-bottom:28px}
}

@media(min-width:1200px) and (max-width:1439px){
  :root{--ux-page-gutter:28px;--ux-card-gutter:20px}
  .app-content{padding-top:28px}
  .page-heading{gap:16px}
}

/* Tablet and iPad content posture. Navigation is owned by navigation-ia.css. */
@media(min-width:768px) and (max-width:1199px){
  :root{--ux-page-gutter:24px;--ux-card-gutter:18px}
  .app-content{padding:24px var(--ux-page-gutter) 72px;max-width:none;min-width:0}
  .page-heading{gap:16px;align-items:flex-start;flex-wrap:wrap}
  .page-heading>div:first-child{min-width:0;flex:1 1 360px}
  .page-actions{flex:0 1 auto;justify-content:flex-end}
  .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dashboard-grid,.dashboard-secondary-grid,.finance-two-col,.student-profile-grid,.organization-settings-grid{grid-template-columns:1fr!important}
  .panel,.form-section,.security-card{min-width:0}
  .form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .field--span-2,.form-grid-span{grid-column:1/-1}
  .table-scroll,.table-wrap,.data-table-wrap,.student-table-wrap,.finance-table-wrap{max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch}
  .data-table{min-width:760px}
  .button,.field-input,input,select,textarea{min-height:46px}
  .mobile-bottom-nav{display:none!important}
}

/* iPad portrait and smaller tablets: simplify action density further. */
@media(min-width:768px) and (max-width:1023px){
  :root{--ux-page-gutter:20px}
  .app-topbar{padding-inline:16px}
  .topbar-kicker{display:none}
  .search-button__label{display:none}
  .page-heading{display:block}
  .page-actions{margin-top:16px;justify-content:flex-start}
  .page-actions .button{flex:1 1 auto}
  .dashboard-grid,.dashboard-secondary-grid{gap:16px}
  .kpi-item{padding:16px 18px}
  .students-toolbar,.students-filters,.report-filters,.attendance-bulk-toolbar{flex-wrap:wrap}
}

/* Mobile: drawer navigation + bottom navigation + thumb-first actions. */
@media(max-width:767px){
  :root{--ux-page-gutter:16px;--ux-card-gutter:16px}
  html,body,.app-shell,.app-main,.app-content{min-width:0;max-width:100%}
  .app-content{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right));padding-bottom:calc(92px + env(safe-area-inset-bottom))}
  .panel-heading{padding-left:16px;padding-right:16px}
  .panel,.form-section,.security-card,.student-profile-grid>*{min-width:0}
  .data-table th:first-child,.data-table td:first-child{padding-left:16px}
  .data-table th:last-child,.data-table td:last-child{padding-right:16px}
  .button,.field-input,input,select,textarea{min-height:48px}
  .icon-button,.quick-add{min-width:44px;min-height:44px}
  .mobile-bottom-nav a,.mobile-bottom-nav button{min-height:56px}
  .page-heading{margin-bottom:20px}
  .page-heading h1{font-size:27px;line-height:1.1}
  .page-actions{gap:10px}
  .form-grid,.finance-two-col,.student-profile-grid,.organization-settings-grid,.dashboard-secondary-grid{grid-template-columns:1fr!important}
  .field,.field--span-2,.form-grid-span{grid-column:1/-1!important;min-width:0}
  .students-toolbar,.students-filters,.report-filters,.attendance-bulk-toolbar{display:grid;grid-template-columns:1fr;gap:10px}
  .students-toolbar>* ,.students-filters>* ,.report-filters>*{width:100%;min-width:0}
  .table-scroll,.table-wrap,.data-table-wrap,.student-table-wrap,.finance-table-wrap{max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch}
  .finance-table,.gradebook-table,.data-table:not(.students-table){min-width:680px}
  .attendance-student{min-width:0}
  .attendance-status-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .attendance-status{min-width:0;min-height:48px}
  .attendance-sticky-save{left:16px;right:16px;bottom:calc(76px + env(safe-area-inset-bottom));width:auto}
  .mobile-more-sheet{padding-bottom:calc(18px + env(safe-area-inset-bottom))}
}

@media(max-width:479px){
  .page-actions{grid-template-columns:1fr!important}
  .page-actions .button{grid-column:auto!important;width:100%}
  .kpi-grid{grid-template-columns:1fr 1fr}
  .kpi-item{padding:14px}
  .kpi-item strong{font-size:22px}
  .topbar-actions{gap:4px}
  .topbar-actions .user-avatar{display:none}
  .attendance-date-nav{gap:8px;flex-wrap:wrap}
  .attendance-date-input{flex:1 1 150px}
}

@media(max-width:389px){
  .app-content{padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right))}
  .kpi-grid{grid-template-columns:1fr}
  .attendance-sticky-save{left:14px;right:14px}
}

/* Product truthfulness: unreleased capabilities are always labeled, never presented as active. */
.feature-status-badge{display:inline-flex;align-items:center;min-height:24px;padding:3px 8px;border-radius:999px;font-size:11px;font-weight:700;line-height:1.2;vertical-align:middle;white-space:nowrap}.feature-status-badge--planned{background:var(--subtle);border:1px solid var(--soft);color:var(--text2)}
.page-heading h1 .feature-status-badge{margin-left:8px;transform:translateY(-2px)}
.planned-features-section{margin-top:28px}.public-roadmap-section{margin:56px 0 8px}.public-roadmap-heading{max-width:720px;margin-bottom:20px}.public-roadmap-heading h2{margin-bottom:6px}.public-roadmap-heading p{margin:0}.planned-feature-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.planned-feature-card{padding:18px 20px}.planned-feature-card__top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.planned-feature-card__top>strong{font:700 16px/1.3 var(--fontH);color:var(--ink)}.planned-feature-card p{margin:10px 0 0;font-size:14px;color:var(--text2)}
@media(max-width:767px){.planned-feature-grid{grid-template-columns:1fr}.planned-feature-card{padding:16px}.planned-feature-card__top{align-items:flex-start}.page-heading h1 .feature-status-badge{display:inline-flex;margin:8px 0 0;transform:none}}

@media(prefers-reduced-motion:reduce){
  .button,.icon-button,.quick-add,.search-button,.workspace-switcher__button,.workspace-menu button,.workspace-menu a,.nav-item,.mobile-bottom-nav a,.mobile-bottom-nav button,.auth-link-button,[role="button"]{transition:none}
  .button:active,.icon-button:active,.quick-add:active,.search-button:active,.workspace-switcher__button:active,.workspace-menu button:active,.workspace-menu a:active,.nav-item:active,.mobile-bottom-nav a:active,.mobile-bottom-nav button:active,.auth-link-button:active,[role="button"]:active{transform:none}
}