/* =============================================================================
 * iOS-style header + sidebar theme
 * -----------------------------------------------------------------------------
 * Scope: the top navbar (admin/inc/topBarNav.php -> .main-header) and the
 * sidebar (admin/inc/navigation.php -> .main-sidebar), which is what was
 * asked for -- not a full app-wide restyle.
 *
 * Loaded last (after adminlte.css, custom.css, theme-miedc.css) specifically
 * so it can override AdminLTE's defaults for these two components without
 * needing !important everywhere.
 *
 * Pieces of "iOS-like":
 *   1. Frosted/translucent navbar (backdrop-filter blur), the signature look
 *      of iOS nav bars and tab bars.
 *   2. Spring-style easing (the standard curve widely documented as iOS's
 *      UINavigationController push/pop and sheet-presentation easing) on
 *      every open/close/press transition instead of AdminLTE's flat
 *      ease-in-out, so the sidebar slide and dropdown/press feedback feel
 *      closer to a native iOS animation.
 *   3. Rounded "grouped list" pill nav items (like iOS Settings rows) with a
 *      colored capsule for the active item instead of a hard-edged bar.
 *   4. San Francisco (-apple-system) as the lead font on these two
 *      components specifically, so real Apple devices render actual SF
 *      Pro/SF Pro Display instead of the app's default Source Sans Pro.
 *   5. Safe-area-inset padding (env(safe-area-inset-*)) so a notched iPhone
 *      -- especially if this is ever added to the home screen as a PWA,
 *      which is why admin/inc/header.php's viewport meta now also declares
 *      viewport-fit=cover -- doesn't tuck the navbar under the notch or the
 *      footer under the home-indicator bar. This is inert (resolves to 0px)
 *      in an ordinary browser tab, where Safari's own chrome already
 *      reserves that space; it only engages in fullscreen/standalone mode.
 * ========================================================================== */

:root {
  --ios-spring: cubic-bezier(0.32, 0.72, 0, 1);
  --ios-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", Roboto, "Source Sans Pro", sans-serif;
}

/* -----------------------------------------------------------------------
 * 1. Frosted-glass top navbar
 * --------------------------------------------------------------------- */
.main-header {
  background-color: rgba(255, 255, 255, 0.78) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.065) !important;
  border-top: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  box-shadow: none !important;
  font-family: var(--ios-font);
  padding-top: env(safe-area-inset-top);
}

/* Fixed-navbar content offset needs to grow by the same safe-area inset the
   navbar itself just grew by, or content would tuck a few px under the bar
   on a notched device in standalone/PWA mode. Ordinary browser tabs: inset
   is 0, so this is identical to AdminLTE's own built-in offset. */
.layout-navbar-fixed.text-sm .wrapper .content-wrapper {
  margin-top: calc(2.93725rem + 1px + env(safe-area-inset-top)) !important;
}

/* -----------------------------------------------------------------------
 * Hamburger + icon buttons: iOS-style rounded tap target with a quick
 * "press" scale-down instead of a hard background flash.
 * --------------------------------------------------------------------- */
.main-header .nav-link {
  border-radius: 8px;
  transition: background-color 0.15s var(--ios-spring), transform 0.15s var(--ios-spring);
}
.main-header .nav-link[data-widget="pushmenu"] {
  font-size: 1.05rem;
}
.main-header .nav-link:active {
  background-color: rgba(0, 0, 0, 0.06);
  transform: scale(0.92);
}

/* User pill + notification bell: same press feedback */
.main-header .btn-rounded {
  transition: background-color 0.15s ease, transform 0.15s var(--ios-spring);
}
.main-header .btn-rounded:active {
  transform: scale(0.96);
}

/* Account toggle: a plain clickable avatar + name + chevron, not a
   button. Previously this was <button class="btn btn-rounded badge
   badge-light ...">, which visually read as a pill-shaped button
   sitting in the navbar; now it's a bare .nav-link (same element type
   the notification bell already uses) so it looks and behaves like a
   normal navbar item that happens to open a menu, with just a subtle
   hover/press tint instead of a button's border+shadow+fill. */
.main-header .account-toggle {
  display: flex;
  align-items: center;
  border-radius: 8px;
  transition: background-color 0.15s ease, transform 0.15s var(--ios-spring);
}
.main-header .account-toggle:hover {
  background-color: rgba(0, 0, 0, 0.045);
}
.main-header .account-toggle:active {
  background-color: rgba(0, 0, 0, 0.07);
  transform: scale(0.98);
}
.main-header .account-toggle-caret {
  font-size: .6rem;
  margin-left: .5rem;
  opacity: .55;
  transition: transform 0.25s var(--ios-spring);
}
.main-header .account-toggle[aria-expanded="true"] .account-toggle-caret,
.main-header .show > .account-toggle .account-toggle-caret {
  transform: rotate(180deg);
}

/* Dropdowns (user menu, notifications) styled like an iOS floating context
   menu / action sheet: fully rounded corners, no hard border, soft shadow. */
.main-header .dropdown-menu {
  border-radius: 14px;
  border: none;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.16);
  padding: 0.4rem;
  overflow: hidden;
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  background-color: rgba(255, 255, 255, 0.92);
}
.main-header .dropdown-menu .dropdown-item {
  border-radius: 9px;
  transition: background-color 0.12s ease;
}
.main-header .dropdown-menu .dropdown-item:active,
.main-header .dropdown-menu .dropdown-item:hover {
  background-color: rgba(0, 0, 0, 0.055);
}
.main-header .dropdown-menu .dropdown-divider {
  margin: 0.35rem 0;
}

/* -----------------------------------------------------------------------
 * 2. Sidebar: spring-eased slide instead of AdminLTE's flat ease-in-out,
 *    on every breakpoint (desktop collapse/expand and mobile open/close
 *    use the same margin-left/transform transition under the hood).
 * --------------------------------------------------------------------- */
.main-sidebar,
.main-sidebar::before {
  transition: margin-left 0.4s var(--ios-spring), transform 0.4s var(--ios-spring),
    width 0.4s var(--ios-spring) !important;
  font-family: var(--ios-font);
}

/* Mobile/tablet backdrop scrim: subtle blur behind it too, like an iOS
   sheet/modal presentation dimming the content behind it. */
@media (max-width: 991.98px) {
  #sidebar-overlay {
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    transition: opacity 0.4s var(--ios-spring), visibility 0.4s var(--ios-spring);
  }
}

/* Brand header: quiet 1px hairline instead of a hard rule, like the
   separator under an iOS large-title bar. */
.main-sidebar .brand-link {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* -----------------------------------------------------------------------
 * 3. Grouped-list nav items: rounded pill rows, colored capsule for the
 *    active item (no hard left border/bar), press feedback on tap.
 * --------------------------------------------------------------------- */
.main-sidebar .nav-sidebar > .nav-item > .nav-link {
  border-radius: 10px;
  margin: 2px 0;
  transition: background-color 0.18s ease, transform 0.12s var(--ios-spring);
}
.main-sidebar .nav-sidebar > .nav-item > .nav-link.active {
  border-radius: 10px;
  box-shadow: none;
}
.main-sidebar .nav-sidebar > .nav-item > .nav-link:active {
  transform: scale(0.98);
}

/* Section labels ("MY WORKSPACE", "HR MANAGEMENT", ...) styled like iOS
   Settings section headers: small, spaced-out, muted uppercase caps. */
.main-sidebar .nav-header {
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  font-weight: 700;
  opacity: 0.55;
  padding-left: 0.9rem;
  margin-top: 0.75rem;
}

/* Collapsible-by-module section headers (data-nav-group toggles in
   admin/inc/navigation.php, behavior in dist/js/script.js). Full-width
   clickable row with a caret that rotates to show collapsed/expanded
   state, same muted label styling as before so this doesn't change how
   the sidebar looks at rest -- only adds the interaction. */
.main-sidebar .nav-header-toggle {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 0.9rem;
  border-radius: 8px;
  transition: background-color 0.15s ease;
}
.main-sidebar .nav-header-toggle:hover {
  background-color: rgba(255, 255, 255, 0.06);
  opacity: 0.85;
}
.main-sidebar .nav-group-caret {
  font-size: 0.65rem;
  opacity: 0.7;
  transition: transform 0.25s var(--ios-spring, ease-in-out);
}
.main-sidebar .nav-header-toggle.nav-group-collapsed .nav-group-caret {
  transform: rotate(-90deg);
}
/* Icon-only sidebar mode: the header text/caret hide anyway (AdminLTE's
   own collapsed-sidebar rules), so the toggle affordance is moot there
   -- nothing extra needed, module folding only makes sense in expanded
   mode where there's a label to click. */

/* -----------------------------------------------------------------------
 * 4. Safe-area padding for the footer, so the home-indicator bar on a
 *    notched iPhone (in standalone/PWA mode) never sits on top of it.
 * --------------------------------------------------------------------- */
.main-footer {
  padding-bottom: calc(0.5rem + env(safe-area-inset-bottom));
}

/* ---------------------------------------------------------------------
 * 5. Explicit sidebar collapse/expand toggle (admin/inc/navigation.php),
 *    anchored to the sidebar's own right edge like a native desktop
 *    app's panel-collapse control. Flips direction and re-centers on the
 *    icon-only rail when the sidebar is collapsed, and hides entirely on
 *    mobile/tablet (<992px) where the header hamburger is the only
 *    control that makes sense.
 * --------------------------------------------------------------------- */
.sidebar-collapse-toggle {
  position: absolute;
  top: 4.2rem;
  right: -.9rem;
  z-index: 1039;
  align-items: center;
  justify-content: center;
}
.sidebar-collapse-toggle a {
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  background: #fff;
  color: var(--miedc-orange-dark, #B85700);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(0, 0, 0, 0.06);
  transition: background-color .15s ease, transform .4s var(--ios-spring, ease-in-out);
}
.sidebar-collapse-toggle a:hover {
  background: var(--miedc-orange-tint, #FDEEDF);
}
.sidebar-collapse-toggle a:active {
  transform: scale(0.9);
}
.sidebar-collapse .sidebar-collapse-toggle a i {
  transform: rotate(180deg);
}
.sidebar-collapse .sidebar-collapse-toggle {
  right: -.9rem;
}

/* Keep the collapsed sidebar reliably icon-only. AdminLTE's own
 * "hover to temporarily widen the collapsed sidebar" behavior is not
 * disabled by the sidebar-no-expand class for the sidebar's outer width
 * (only for submenu treeview display, which this app's flat sidebar
 * doesn't use anyway) -- and since the collapse toggle button itself
 * lives inside the sidebar, clicking it means the mouse is hovering
 * over the sidebar at that exact moment, which would otherwise make it
 * look like the click "didn't work" (still full width) until the mouse
 * moves away. A predictable, static collapsed rail that only expands on
 * an explicit click is the clearer, more professional behavior here.
 */
.sidebar-mini.sidebar-collapse .main-sidebar:hover,
.sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused {
  width: 4.6rem !important;
}

/* Respect reduced-motion preferences: fall back to a simple, fast fade
   instead of the spring slide for anyone who has asked their OS for less
   motion (iOS itself honors this the same way). */
@media (prefers-reduced-motion: reduce) {
  .main-sidebar,
  .main-sidebar::before,
  .main-header .nav-link,
  .main-header .btn-rounded,
  #sidebar-overlay {
    transition-duration: 0.01ms !important;
  }
}