/* File: static/css/app.css
   Bright / HD light UI (Material-ish) for Faryoshlar
*/

/* =========================
   Design tokens
========================= */
:root{
  /* surfaces */
  --bg: #F6F8FC;
  --panel: #FFFFFF;
  --panel2: #F3F6FB;

  /* borders */
  --border: rgba(15, 23, 42, .12);
  --border2: rgba(15, 23, 42, .18);

  /* text */
  --text: #0B1220;
  --muted:#475569;

  /* primary */
  --primary: #2563EB;
  --primary2:#1D4ED8;
  --primary3:#1E40AF;
  --primarySoft:#EAF2FF;

  --success:#16a34a;
  --danger:#ef4444;
  --warning:#f59e0b;

  /* radius */
  --r12: 12px;
  --r16: 16px;
  --r20: 20px;

  /* shadows */
  --shadow: 0 10px 26px rgba(15,23,42,.08);
  --shadow2: 0 18px 46px rgba(15,23,42,.12);

  /* focus ring */
  --ring: 0 0 0 3px rgba(37, 99, 235, .18);

  /* alias */
  --card: var(--panel);

  /* sizing */
  --topbar-h: 64px;
  --tabs-h: 56px;
}

@media (max-width: 640px){
  :root{ --topbar-h: 56px; }
}

/* =========================
   Base / reset
========================= */
*{ box-sizing:border-box; }
html, body{ height:100%; }

/* Prevent page shift when scrollbar appears/disappears */
html{ scrollbar-gutter: stable; }

body{
  margin:0;
  color: var(--text);
  background: var(--bg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;

  overflow-x: hidden;
  overflow-y: scroll; /* fallback for stable layout */

  scroll-padding-top: calc(var(--topbar-h) + var(--tabs-h));
}

a{ color: inherit; text-decoration: none; }
a:hover{ text-decoration:none; }

input, select, textarea, button{ font-family: inherit; }

input, select, textarea{
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  background: #fff;
  outline: none;
}
input:focus, select:focus, textarea:focus{
  border-color: rgba(37,99,235,.55);
  box-shadow: var(--ring);
}

/* =========================
   Layout / containers
========================= */
.app-shell{
  max-width: 1380px;
  margin: 0 auto;
  padding: 0 14px 22px;
  overflow: visible;
  transform: none;
}

.app-main{
  margin-top: 14px;
  overflow: visible;
  transform: none;
  padding-top: 12px; /* .fy-sticky ishlaganda kichik bo‘shliq */
}

.container, .wrap, .page-wrap, .content-wrap{
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 14px;
  overflow: visible;
  transform: none;
}

/* Sticky buzilmasin (parent overflow/transform) */
.page-wrap, .main-content, .content, .wrapper{
  overflow: visible !important;
  transform: none !important;
}

/* Auth pages (optional) */
.auth-page .app-shell{
  min-height: 100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 22px 14px;
}
.auth-main{ width: min(520px, 100%); }

/* =========================
   Surfaces
========================= */
.glass,
.glass-soft,
.panel,
.card{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r16);
  box-shadow: var(--shadow);
}

.hover-lift{
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.hover-lift:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow2);
  border-color: var(--border2);
}

.muted{ color: var(--muted); }
.mt{ margin-top: 12px; }

/* =========================
   STICKY wrapper (header + tabs together)
   base.html da <div class="fy-sticky"> ... </div>
========================= */
.fy-sticky{
  position: sticky;
  top: 0;
  z-index: 5000;
  transform: none !important;
}

/* Sticky ichida hover-lift transform berib yubormasin */
.fy-sticky .hover-lift{ transform: none !important; }

/* =========================
   Header (topbar)
========================= */
.fy-topbar,
.topbar,
.site-header{
  display:flex;
  align-items:center;
  gap:12px;

  background: linear-gradient(180deg, var(--primary2), var(--primary3));
  color: #fff;

  padding: 0 12px; /* sizning hozirgi setting */
  transform: none;
}

/* Header full width (app-shell ichida) */
.app-shell > .fy-topbar,
.app-shell > .topbar{
  margin: 14px 14px;
  padding-left: 50px;
  padding-right: 26px;
}

.fy-logo{ display:flex; align-items:center; color:#fff; }
.fy-logo-img{ width: 80px; height: 80px; display:block; margin-left: 30px; margin-bottom: 15px; margin-top: 15px;}
.fy-logo-text{ font-weight: 400; letter-spacing: .2px; font-size: 13px; }

.fy-brand{
  flex:1;
  text-align:center;
  font-weight: 800;
  letter-spacing: .25px;
  text-transform: uppercase;
  font-size: 17px;
  line-height: 1.15;
  opacity: .98;
  color:#fff;
}

.fy-user{ margin-left:auto; }
.fy-userbtn{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 6px 10px;
  color:#fff;
  border-radius: 999px;
}
.fy-userbtn:hover{ background: rgba(255,255,255,.14); }

.fy-avatar{
  width: 36px;
  height: 36px;
  border-radius: 999px;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,.42);
  background: rgba(255,255,255,.18);
}
.fy-avatar-text{
  display:grid;
  place-items:center;
  font-weight: 800;
  color:#fff;
  background: rgba(255,255,255,.18);
}
.fy-userinfo{ display:flex; flex-direction:column; line-height: 1.05; }
.fy-username{ font-weight: 800; font-size: 13px; }
.fy-userrole{ font-weight: 700; font-size: 11px; color: rgba(255,255,255,.85); }

/* =========================
   Buttons / controls
========================= */
.fy-input,
.yf-ctrl,
.fi{
  height: 38px;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #fff;
  outline: none;
}
.fy-input:focus, .yf-ctrl:focus, .fi:focus{
  border-color: rgba(37,99,235,.55);
  box-shadow: var(--ring);
}

.fy-btn-primary,
.btn-pill,
.dep-btn{
  height: 38px;
  padding: 0 14px;
  border: 1px solid rgba(255,255,255,0);
  border-radius: 999px;
  background: var(--primary);
  color:#fff;
  font-weight: 800;
  cursor:pointer;
}
.fy-btn-primary:hover, .btn-pill:hover, .dep-btn:hover{
  background: var(--primary2);
}

.fy-btn-ghost{
  height: 38px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
  color: var(--text);
  font-weight: 800;
  cursor:pointer;
}
.fy-btn-ghost:hover{ background: var(--panel2); }

/* =========================
   Tabs (menu)
========================= */
.fy-tabs{
  display:flex;
  align-items:center;
  gap: 12px;
  flex-wrap: wrap;

  padding:10px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow: var(--shadow);

  /* geometrik stabil */
  min-height: 64px;
}

.fy-tab{
  height: 44px;
  min-width: 190px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  padding: 10px 14px;
  border-radius: 12px;

  font-weight: 900;
  font-size: 13px;
  color: var(--text);

  border: 1px solid transparent;
  background: transparent;
  line-height: 1;
  user-select: none;
}

.fy-tab i{ font-size: 16px; }
.fy-tab span{ font-weight: 900; letter-spacing: .2px; }

.fy-tab:hover{
  background: rgba(11,79,138,.08);
  border-color: rgba(11,79,138,.18);
}

.fy-tab.active,
.fy-tab.is-active,
.fy-tab[aria-current="page"]{
  background: rgba(11,79,138,.14);
  border-color: rgba(11,79,138,.25);
  color: var(--primary);
}

.fy-tabs .tabs-spacer{ flex: 1 1 auto; min-width: 40px; }
.fy-tabs .tabs-search{ margin-left: 0; padding: 0; }

.fy-tabs .tabs-search input{
  height:38px;
  border-radius:12px;
  border:1px solid var(--border);
  padding: 0 12px;
}

.fy-tabs .tabs-search input:focus{
  border-color: rgba(11,79,138,.55);
  box-shadow: 0 0 0 3px rgba(11,79,138,.15);
}

/* mobile */
@media (max-width: 640px){
  .fy-tabs{ padding:10px; }
  .fy-tabs .tabs-search{ width:100%; }
  .fy-tabs .tabs-search input{ width:100%; }
}

/* ======================================
   GVARDIYA THEME OVERRIDES (drop-in)
   Qo'yish joyi: app.css OXIRI
====================================== */
:root{
  /* Page/surfaces */
  --bg: #f3f4f6;           /* sahifa fon */
  --panel: #ffffff;
  --panel2: #f8fafc;

  /* Text */
  --text: #0b1220;
  --muted:#475569;

  /* Gvardiya ranglari (primary endi bordo bo'ladi) */
  --primary:  #7b1e22;     /* bordo */
  --primary2: #64171b;     /* bordo darker */
  --primary3: #0f172a;     /* slate (deep) */
  --primarySoft: rgba(123,30,34,.10);

  /* Accent */
  --gold: #d7b56d;

  /* Focus ring (bordo + gold aralash yumshoq) */
  --ring: 0 0 0 3px rgba(215,181,109,.22);
}

/* Header (topbar) endi to‘q slate bo‘lsin */
.fy-topbar, .topbar, .site-header{
  background: linear-gradient(180deg, #0f172a, #111827) !important;
  border-bottom: 1px solid rgba(255,255,255,.10);
}

/* Tabs (menyu) endi bordo panel */
.fy-tabs{
  background: linear-gradient(180deg, #7b1e22, #64171b) !important;
  border-color: rgba(0,0,0,.10) !important;
}

/* Tabs ichidagi buttonlar */
.fy-tab{
  color: rgba(255,255,255,.92) !important;
}
.fy-tab:hover{
  background: rgba(215,181,109,.12) !important;
  border-color: rgba(215,181,109,.22) !important;
}
.fy-tab.active,
.fy-tab.is-active,
.fy-tab[aria-current="page"]{
  background: rgba(215,181,109,.18) !important;
  border-color: rgba(215,181,109,.32) !important;
  color: #fff !important;
}

/* Search input tabs ichida oq bo‘lsin */
.fy-tabs .tabs-search input{
  background: rgba(255,255,255,.95) !important;
  border-color: rgba(255,255,255,.35) !important;
}
.fy-tabs .tabs-search input:focus{
  border-color: rgba(215,181,109,.75) !important;
  box-shadow: var(--ring) !important;
}

/* Primary buttonlar (dep-btn, btn-pill, fy-btn-primary) bordo bo‘ladi */
.fy-btn-primary, .btn-pill, .dep-btn{
  background: #7b1e22 !important;
}
.fy-btn-primary:hover, .btn-pill:hover, .dep-btn:hover{
  background: #64171b !important;
}

/* Oltin chiziq aksenti (ixtiyoriy) */
.card .card-title:before,
.panel .panel-title:before{
  background: var(--gold) !important;
}



/* ===== MG LOGIN (FULLSCREEN) ===== */

/* 1) Gradient butun sahifada */
body.auth-page{
  min-height: 100vh;
  background:
    radial-gradient(900px 420px at 50% 8%, rgba(255,255,255,.12), transparent 55%),
    linear-gradient(180deg, #7a0f0f 0%, #5a0c0c 45%, #0b1f3a 100%) !important;
}

/* 2) Wrap endi "panel" emas — faqat markazlashtiradi */
.mg-login-wrap{
  min-height: 100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 22px 14px;
  background: transparent !important;
}

/* 3) Card */
.mg-login-card{
  width: 100%;
  max-width: 440px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 25px 60px rgba(0,0,0,.35);
  background: #ffffff;
}

.mg-login-card .card-body{ padding: 26px 28px 30px; }

/* Logo */
.mg-login-logo{ display:flex; justify-content:center; margin-bottom: 12px; }
.mg-login-logo img{ width: 92px; height:auto; object-fit:contain; }

/* Title */
.mg-login-title{
  text-align:center;
  font-weight: 900;
  font-size: 18px;
  margin: 6px 0 18px;
  color:#0b1f3a;
}

/* Inputs */
.mg-login-card .form-label{ font-weight: 800; font-size: 13px; color:#0f172a; }
.mg-login-card .form-control{
  border-radius: 12px;
  border: 1px solid #cbd5e1;
  padding: 10px 12px;
  font-weight: 600;
}
.mg-login-card .form-control:focus{
  border-color: #7a0f0f;
  box-shadow: 0 0 0 3px rgba(122,15,15,.18);
}

/* Button */
.mg-login-btn{
  height: 44px;
  border-radius: 999px;
  background: linear-gradient(180deg, #8b1414, #6b0f0f);
  border: none;
  color:#fff;
  font-weight: 900;
  font-size: 14px;
  letter-spacing: .3px;
}
.mg-login-btn:hover{ box-shadow: 0 10px 22px rgba(122,15,15,.45); }