/* =========================================================
   SHARED ADMIN RESPONSIVENESS
   Global layout rules only.
   Page-specific responsive rules remain in each page file.
========================================================= */

/* =========================================================
   LARGE TABLET / SMALL LAPTOP
========================================================= */

@media(max-width:1100px){

  .admin-sidebar{
    width:230px;
    padding:24px 18px;
  }

  .admin-brand span{
    font-size:20px;
  }

  .admin-topbar{
    padding:22px 26px;
  }

  .admin-main{
    padding:26px;
  }

  .admin-search{
    width:220px;
  }
}

/* =========================================================
   TABLET
========================================================= */

@media(max-width:850px){

  .admin-body{
    display:block;
    min-height:100vh;
  }

  /* ---------------------------------------------------------
     SIDEBAR BECOMES A TOP NAVIGATION BAR
  --------------------------------------------------------- */

  .admin-sidebar{
    position:relative;
    top:auto;

    width:100%;
    height:auto;
    min-height:0;

    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;
    gap:16px;

    padding:14px 18px;
  }

  .admin-brand{
    min-width:max-content;

    flex-direction:row;
    align-items:center;
    gap:10px;

    margin:0;
  }

  .admin-brand img{
    width:38px;
    margin:0;
  }

  .admin-brand span{
    font-size:16px;
    letter-spacing:1.4px;
  }

  .admin-brand small{
    display:none;
  }

  .admin-menu{
    min-width:0;

    flex-direction:row;
    align-items:center;
    gap:6px;

    overflow-x:auto;
    overscroll-behavior-inline:contain;
    scrollbar-width:thin;
  }

  .admin-menu a{
    flex-shrink:0;

    padding:10px 12px;

    white-space:nowrap;

    font-size:11px;
  }

  .admin-count{
    min-width:18px;
    height:18px;

    padding:0 5px;

    font-size:9px;
  }

  .admin-logout{
    flex-shrink:0;

    margin:0;
    padding:10px 13px;

    font-size:11px;
  }

  /* ---------------------------------------------------------
     WORKSPACE
  --------------------------------------------------------- */

  .admin-workspace{
    min-width:0;
  }

  .admin-topbar{
    padding:20px 22px;
  }

  .admin-topbar h1{
    font-size:24px;
  }

  .admin-topbar p{
    font-size:12px;
  }

  .admin-search{
    width:200px;
  }

  .admin-main{
    padding:22px;
  }
}

/* =========================================================
   SMALL TABLET / LARGE MOBILE
========================================================= */

@media(max-width:700px){

  /* ---------------------------------------------------------
     SIDEBAR
  --------------------------------------------------------- */

  .admin-sidebar{
    grid-template-columns:1fr auto;
    gap:12px;
  }

  .admin-menu{
    grid-column:1 / -1;
    grid-row:2;

    width:100%;

    padding-top:4px;
  }

  .admin-logout{
    grid-column:2;
    grid-row:1;
  }

  /* ---------------------------------------------------------
     TOPBAR
  --------------------------------------------------------- */

  .admin-topbar{
    flex-direction:column;
    align-items:flex-start;

    gap:16px;

    padding:18px;
  }

  .admin-topbar h1{
    font-size:23px;
  }

  .admin-top-actions{
    width:100%;

    justify-content:flex-end;
    flex-wrap:wrap;
  }

  .admin-search{
    width:100%;
    flex-basis:100%;

    order:3;
  }

  .admin-search input{
    min-height:42px;
  }

  .admin-profile-copy{
    display:none;
  }

  .admin-profile-button{
    padding:5px;
    border-radius:50%;
  }

  .admin-avatar{
    width:38px;
    height:38px;
  }

  /* ---------------------------------------------------------
     CONTENT
  --------------------------------------------------------- */

  .admin-main{
    padding:18px;
  }

  .admin-panel{
    border-radius:14px;
  }

  .admin-panel-header{
    gap:12px;
  }

  /* ---------------------------------------------------------
     MODALS
  --------------------------------------------------------- */

  .admin-modal{
    align-items:flex-start;

    padding:14px;
  }

  .admin-modal-card{
    width:100%;
    max-height:calc(100vh - 28px);

    border-radius:15px;
  }

  .admin-modal-header{
    padding:18px;
  }

  .admin-modal-header h2{
    font-size:19px;
  }

  .admin-modal-header p{
    font-size:11px;
  }

  .admin-modal-footer{
    padding:15px 18px;
  }

  .admin-primary-button,
  .admin-secondary-button{
    min-height:40px;

    padding:9px 15px;

    font-size:11px;
  }
}

/* =========================================================
   MOBILE
========================================================= */

@media(max-width:480px){

  .admin-sidebar{
    padding:12px;
  }

  .admin-brand img{
    width:34px;
  }

  .admin-brand span{
    font-size:14px;
  }

  .admin-logout{
    padding:9px 11px;

    font-size:10px;
  }

  .admin-menu a{
    padding:9px 11px;

    font-size:10px;
  }

  .admin-topbar{
    padding:16px 14px;
  }

  .admin-topbar h1{
    font-size:21px;
  }

  .admin-topbar p{
    font-size:11px;
    line-height:1.5;
  }

  .admin-top-actions{
    gap:9px;
  }

  .admin-notification{
    width:39px;
    height:39px;
  }

  .admin-avatar{
    width:36px;
    height:36px;
  }

  .admin-main{
    padding:14px;
  }

  .admin-panel-header{
    flex-direction:column;
    align-items:flex-start;
  }

  .admin-empty-state{
    min-height:150px;
    padding:24px 18px;
  }

  .admin-empty-state h3{
    font-size:15px;
  }

  .admin-empty-state p{
    font-size:11px;
  }

  .admin-modal{
    padding:8px;
  }

  .admin-modal-card{
    max-height:calc(100vh - 16px);

    border-radius:13px;
  }

  .admin-modal-header{
    padding:16px;
  }

  .admin-modal-close{
    width:32px;
    height:32px;

    font-size:20px;
  }

  .admin-modal-footer{
    flex-direction:column-reverse;

    padding:14px 16px;
  }

  .admin-modal-footer button,
  .admin-modal-footer a{
    width:100%;
  }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce){

  *,
  *::before,
  *::after{
    scroll-behavior:auto !important;
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
  }
}