@import url("./theme/colors.css");
:root{
  --sidebar-width:240px;
  --radius:18px;
  --shadow:
    0 1px 2px rgba(0,0,0,.03),
    0 8px 24px rgba(0,0,0,.04);

}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  font-family:Inter,sans-serif;
  background:var(--main);
  color:var(--text);
}


::-webkit-scrollbar{
  display: none;
}

/* ======================================
   APP LAYOUT
====================================== */

.app-layout{
  display:flex;
  min-height:100vh;
}

/* ======================================
   SIDEBAR
====================================== */

.sidebar{

  width:var(--sidebar-width);

  background:var(--card);

  border-right:1px solid var(--border);

  display:flex;
  flex-direction:column;

  padding:18px;

  position:fixed;

  top:0;
  left:0;
  bottom:0;

  z-index:100;
}

.sidebar-top{
  display:flex;
  flex-direction:column;
  gap:20px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
}

.brand-logo{
  width:38px;
  height:38px;
  background-color: var(--primary);
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:1rem;

  color:#111;
}

.brand-text h3{
  font-size:15px;
  font-weight:600;
  color: var(--text);
}

.brand-text span{
  font-size:12px;
  color:var(--muted);
}

/* ======================================
   THEME TOGGLE
====================================== */

.theme-toggle{
  width: 100%;
  height: 46px;
  border:none;
  background:transparent;
  gap: 12px;
  display:flex;
  padding: 0 14px;
  align-items:center;
  cursor:pointer;
}

.theme-toggle span{
  font-size:14px;
  color:var(--muted);
}

.toggle-track{

  width:44px;
  height:24px;

  background:#d4d4d4;

  border-radius:999px;

  padding:3px;

  position:relative;

  transition:.25s;
}

.toggle-thumb{

  width:18px;
  height:18px;

  background:#fff;

  border-radius:50%;

  transition:.25s;
}

body.dark .toggle-track{
  background:var(--primary);
}

body.dark .toggle-thumb{
  transform:translateX(20px);
}

/* ======================================
   COMPANY
====================================== */

.company-card{

  margin-top:24px;

  background:var(--bg);

  border:1px solid var(--border);

  border-radius:10px;

  padding:8px 10px;

  display:flex;
  align-items:center;
  gap:12px;
}

.company-card.hidden{
  display: none;
}

.company-card img{

  width:24px;
  height:24px;

  border-radius:12px;

  object-fit:cover;
}

.company-meta h4{
  font-size:12px;
  font-weight:600;
}

.company-meta span{
  font-size:11px;
  color:var(--muted);
}

/* ======================================
   NAV
====================================== */

.sidebar-nav{

  display:flex;
  flex-direction:column;

  gap:1px;

  margin-top:28px;
}

.nav-link{

  height:40px;

  border:none;
  background:transparent;

  border-radius:10px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 8px;

  color:var(--muted);

  cursor:pointer;

  transition:.2s;
}

.nav-link .indicator{
  width: 6px;
  border-radius: 10px;
  height: 20px;
}

.nav-link i{
  font-size:16px;
  color: var(--muted);
  opacity: .5;
}

.nav-link span{
  font-size:13px;
  font-weight:500;
}

.nav-link:hover{
  background:var(--bg);
  color:var(--text);
}

.nav-link.active{
  background: var(--bg);
    color:var(--text) !important;
}

.nav-link.active span{
  color:var(--text) !important;
  font-weight: bold;
}

.nav-link.active i{
  color:var(--text) !important;
  opacity: 1;
}

.nav-link.active .indicator{
  background-color: var(--text);
  opacity: .2;
}

/* ======================================
   BOTTOM
====================================== */

.sidebar-bottom{
  margin-top:auto;
}

.logout-btn{

  width:100%;
  height:46px;

  border:none;

  background:transparent;

  border-radius:14px;

  display:flex;
  align-items:center;
  gap:12px;

  padding:0 14px;

  cursor:pointer;

  color: var(--text);
}

.logout-btn span{
  font-size:14px;
}

/* ======================================
   MAIN
====================================== */

.main-content{

  margin-left:var(--sidebar-width);

  flex:1;

  min-height:100vh;
}

/* ======================================
   TOPBAR
====================================== */

.topbar{

  height:60px;
  background: var(--main);
  backdrop-filter:blur(10px);
  display:flex;
  /* border-bottom: 1px solid var(--border); */
  align-items:center;
  justify-content:space-between;
  padding:0 32px;
  position:sticky;
  top:0;
  z-index:50;
}

.topbar h1{
  font-size:1.4rem;
  font-weight:600;
}

.topbar p{
  font-size:13px;
  color:var(--muted);
  margin-top:4px;
}

.topbar-actions{
  display:flex;
  align-items:center;
  gap:12px;
}

.action-btn,
.profile-btn{
  width:42px;
  height:42px;
  border-radius:14px;
  border:1px solid var(--border);
  background:var(--card);
  cursor:pointer;
}

.action-btn i{
  color: var(--text);
  font-size: 18px;
}

.profile-btn img{
  width:100%;
  height:100%;
  border-radius:14px;
}

.notification-btn{
  position:relative;
}

.notification-dropdown-wrapper{
  position:relative;
}

.notification-btn{
  position:relative;
}

.notification-badge{
  position:absolute;

  top:-6px;
  right:-6px;

  min-width:20px;
  height:20px;

  padding:0 6px;

  border-radius:999px;

  background:#ff3b30;
  color:#ffffff;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:11px;
  font-weight:800;

  border:2px solid #ffffff;
}

.notification-badge.hidden{
  display:none;
}

.notification-dropdown{
  position:absolute;

  top:64px;
  right:0;

  width:380px;

  background:#ffffff;

  border:
    1px solid #edf2f7;

  border-radius:28px;

  overflow:hidden;

  opacity:0;
  visibility:hidden;

  transform:
    translateY(10px);

  transition:.22s;

  box-shadow:
    0 20px 50px rgba(15,23,42,.10);

  z-index:999;
}

.notification-dropdown.active{
  opacity:1;
  visibility:visible;

  transform:
    translateY(0);
}

.dropdown-header{
  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:
    22px 22px 18px;

  border-bottom:
    1px solid #f1f5f9;
}

.dropdown-header h3{
  font-size:18px;
  font-weight:800;

  color:#111827;

  margin-bottom:4px;
}

.dropdown-header span{
  color:#64748b;

  font-size:13px;
}

.see-all{
  color:#111827;

  font-size:13px;
  font-weight:700;

  text-decoration:none;
}

.dropdown-list{
  max-height:420px;

  overflow-y:auto;
}

.dropdown-item{
  display:flex;
  gap:14px;

  padding:18px 22px;

  border-bottom:
    1px solid #f8fafc;

  transition:.2s;
}

.dropdown-item:hover{
  background:#fafafa;
}

.dropdown-item.unread{
  background:#fffef2;
}

.dropdown-icon{
  width:46px;
  height:46px;

  border-radius:16px;

  background:#fff8cc;

  display:flex;
  align-items:center;
  justify-content:center;

  flex-shrink:0;
}

.dropdown-icon i{
  font-size:20px;
  color:#111827;
}

.dropdown-content{
  flex:1;
}

.dropdown-content strong{
  display:block;

  font-size:14px;
  font-weight:800;

  color:#111827;

  margin-bottom:6px;
}

.dropdown-content p{
  color:#64748b;

  font-size:13px;
  line-height:1.7;

  margin-bottom:8px;
}

.dropdown-time{
  color:#94a3b8;

  font-size:11px;
  font-weight:600;
}

.dropdown-empty{
  padding:
    50px 24px;

  text-align:center;
}

.dropdown-empty i{
  font-size:42px;

  color:#cbd5e1;

  margin-bottom:12px;
}

.dropdown-empty p{
  color:#64748b;

  font-size:14px;
}

@media(max-width:768px){

  .notification-dropdown{
    width:340px;
    right:-80px;
  }

}

/* ======================================
   PAGE
====================================== */

.page-container{
  padding:24px;
}

#appFrame{
  width:100%;
  height:100vh;
  border:none;
  background:transparent;
}

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

.bottom-nav{

  display:none;

  position:fixed;

  bottom:0;
  left:0;
  right:0;

  height:72px;

  background:rgba(255,255,255,.95);

  backdrop-filter:blur(12px);

  border-top:1px solid var(--border);

  z-index:999;

  padding:0 10px;
}

body.dark .bottom-nav{
  background: var(--main);
}

.bottom-link{

  flex:1;
  border:none;
  background:transparent;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  margin: .5rem;
  color:var(--muted);
  border-radius: .9rem;
  cursor:pointer;
}

.bottom-link i{
  font-size:20px;
}

.bottom-link span{
  font-size:12.5px;
}

.bottom-link.active{
  color: #000;
  background-color: var(--primary);
}

.bottom-link.active span{
  color: #000;
  font-weight: bold;
}
.topbarLogo{
  display: none;
}

/* ======================================
   RESPONSIVE
====================================== */

@media(max-width:960px){

  .sidebar{
    display:none;
  }

  .main-content{
    margin-left:0;
  }

  .bottom-nav{
    display:flex;
  }

  .page-container{
    padding:16px 16px 90px;
  }

  .topbar{
    padding:0 18px;
  }

  .topbarLogo{
    display: block;
  }

}

.dialog-overlay{
  position:fixed;
  inset:0;
cursor: pointer;
  background:rgba(0, 0, 0, 0.55);

  backdrop-filter:blur(6px);

  display:flex;
  align-items:center;
  justify-content:center;

  padding:1rem;

  z-index:99999;

  opacity:1;
  visibility:visible;

  transition:.2s ease;
}

.dialog-overlay.hidden{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

.dialog-container{
  width:min(100%, 680px);
  max-height:90vh;

  border-radius:28px;

  overflow:hidden;

  animation:dialogEnter .22s ease;
}

.dialog-container iframe{
  width:100%;
  height:100%;

  min-height:500px;

  border:none;

  background:transparent;
}

@keyframes dialogEnter{

  from{
    opacity:0;
    transform:translateY(12px) scale(.98);
  }

  to{
    opacity:1;
    transform:none;
  }
}

@media(max-width:768px){

  .dialog-overlay{
    padding:0;
    align-items:flex-end;
  }

  .dialog-container{
    width:100%;
    max-width:none;

    border-radius:24px 24px 0 0;
  }

  .dialog-container iframe{
    min-height:82vh;
  }
}

/* =========================================
 LOADER
========================================= */

.portal-loader{
  position:fixed;
  inset:0;
  background:#f8fafc;
  z-index:99999;
  display:flex;
  align-items:center;
  justify-content:center;
}

.loader-content{
  text-align:center;
  color:var(--text);
}

.loader-logo{
  width:90px;
  height:90px;
  object-fit:contain;
  margin-bottom:1.5rem;
  animation:floatLogo 2s ease-in-out infinite;
}

.loader-spinner{
  width:42px;
  height:42px;
  border-radius:50%;
  border:3px solid rgba(255,255,255,.15);
  border-top-color: var(--primary);
  margin:0 auto 1.25rem;
  animation:spin .8s linear infinite;
}

.loader-content h2{
  font-size:1.25rem;
  margin-bottom:.5rem;
}

.loader-content p{
  color:var(--muted);
  font-size:.92rem;
}

/* =========================================
 AUTH GATE
========================================= */

.auth-gate{
  min-height:100vh;
  background:
    radial-gradient(circle at top right,
      rgba(255,207,51,.18),
      transparent 30%),
    #f8fafc;

  display:flex;
  align-items:center;
  justify-content:center;
  padding:1.5rem;
}

.auth-card{
  width:min(480px,100%);
  background:white;
  border-radius:32px;
  padding:2.5rem;
  text-align:center;
  box-shadow:
    0 20px 60px rgba(15,23,42,.08);
}

.auth-logo{
  width:84px;
  height:84px;
  object-fit:contain;
  margin-bottom:1rem;
}

.auth-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:34px;
  padding:0 1rem;
  border-radius:999px;
  background:rgba(255,207,51,.16);
  color:#111827;
  font-weight:700;
  font-size:.82rem;
  margin-bottom:1.25rem;
}

.auth-card h1{
  font-size:2rem;
  line-height:1.2;
  margin-bottom:1rem;
  color:#111827;
}

.auth-card p{
  color:#64748b;
  line-height:1.7;
  margin-bottom:2rem;
}

.auth-actions{
  display:flex;
  gap:1rem;
}

.btn{
  flex:1;
  height:52px !important;
  border:none;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.65rem;
  font-weight:700;
  cursor:pointer;
  transition:.2s ease;
}

.btn-primary{
  background: var(--primary);
  color:#111827;
}

.btn-primary:hover{
  transform:translateY(-2px);
}

.btn-outline{
  background:white;
  border:1px solid #e2e8f0;
  color:#111827;
}

.hidden{
  display:none !important;
}



/* =========================================
 ANIMATIONS
========================================= */

@keyframes spin{
  to{
    transform:rotate(360deg);
  }
}

@keyframes floatLogo{
  0%,100%{
    transform:translateY(0px);
  }

  50%{
    transform:translateY(-6px);
  }
}

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

@media(max-width:768px){

  .btn{
  flex:none;
  }

  .auth-card{
    padding:2rem 1.4rem;
    border-radius:24px;
  }

  .auth-card h1{
    font-size:1.6rem;
  }

  .auth-actions{
    flex-direction:column;
  }
}