@font-face {
  font-family: "BPG Glaho Sylfaen";
  src: url("/assets/1.0.0/desk/webfonts/bpg_glaho_sylfaen.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans Georgian VF";
  src: url("/assets/1.0.0/desk/webfonts/NotoSansGeorgian-VariableFont_wdth,wght.ttf")
       format("truetype-variations");
  font-weight: 100 900;   /* wght ღერძი */
  font-stretch: 75% 125%; /* wdth ღერძი (თუ ფონტი რეალურად უჭერს მხარს) */
  font-style: normal;
  font-display: swap;
}

:root{
  --gray-50:#f9fafb; --gray-100:#f3f4f6; --gray-200:#e5e7eb; --gray-300:#d1d5db; --gray-400:#9ca3af;
  --gray-500:#6b7280; --gray-600:#4b5563; --gray-700:#374151; --gray-800:#1f2937; --gray-900:#111827;

  --slate-50:#f8fafc; --slate-100:#f1f5f9; --slate-200:#e2e8f0; --slate-300:#cbd5e1; --slate-400:#94a3b8;
  --slate-500:#64748b; --slate-600:#475569; --slate-700:#334155; --slate-800:#1e293b; --slate-900:#0f172a;

  --teal-50:#f0fdfa; --teal-100:#ccfbf1; --teal-200:#99f6e4; --teal-300:#5eead4; --teal-400:#2dd4bf;
  --teal-500:#14b8a6; --teal-600:#0d9488; --teal-700:#0f766e; --teal-800:#115e59; --teal-900:#134e4a;

  --emerald-50:#ecfdf5; --emerald-100:#d1fae5; --emerald-200:#a7f3d0; --emerald-300:#6ee7b7; --emerald-400:#34d399;
  --emerald-500:#10b981; --emerald-600:#059669; --emerald-700:#047857; --emerald-800:#065f46; --emerald-900:#064e3b;

  --blue-50:#eff6ff; --blue-100:#dbeafe; --blue-200:#bfdbfe; --blue-300:#93c5fd; --blue-400:#60a5fa;
  --blue-500:#3b82f6; --blue-600:#2563eb; --blue-700:#1d4ed8; --blue-800:#1e40af; --blue-900:#1e3a8a;

  --red-50:#fef2f2; --red-100:#fee2e2; --red-200:#fecaca; --red-300:#fca5a5; --red-400:#f87171;
  --red-500:#ef4444; --red-600:#dc2626; --red-700:#b91c1c; --red-800:#991b1b; --red-900:#7f1d1d;

  --primary: var(--emerald-500);
  --primary-dark: var(--emerald-600);
  --secondary: var(--blue-500);
  --secondary-dark: var(--blue-600);
  --create : var(--teal-600);
  --create-dark : var(--teal-700);  

  --bg: var(--slate-50);
  --card: #ffffff;
  --text: var(--slate-900);
  --text-primary: var(--slate-800);
  --text-secondary: var(--slate-500);
  --border: var(--slate-200);

  --hover: var(--slate-100);
  --row-hover: var(--slate-50);
  --menu-hover: var(--teal-50);

  --shimmer-1: #f0f0f0;
  --shimmer-2: #e0e0e0;

  --scroll-thumb: var(--slate-300);
  --scroll-thumb-hover: var(--slate-400);
}

/* ========= DARK overrides by body[theme="dark"] ========= */
body[theme="dark"]{
  --bg: #0b1220; /* მაინდფულკი მუქი ფონისთვის */
  --card: var(--gray-900);
  --text: var(--slate-100);
  --text-primary: var(--slate-100);
  --text-secondary: var(--slate-400);
  --border: var(--gray-700);

  --hover: var(--gray-800);
  --row-hover: var(--gray-900);
  --menu-hover: #0e2a36;   /* teal-ის მუქი ტონი შერეული */

  --shimmer-1: var(--gray-700);
  --shimmer-2: var(--gray-900);

  --scroll-thumb: var(--slate-700);
  --scroll-thumb-hover: var(--slate-600);
}

/* ========= Base ========= */
body{
  zoom: 0.8;
  background-color:var(--bg);
  color:var(--text-primary);
  transform-origin: top left;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  overscroll-behavior-y: contain;
}

/* ========= Components styled with semantic variables ========= */
.sticky-th{position:sticky;top:0;z-index:5;background:var(--card);box-shadow:0 1px 0 0 var(--border);}
.scroll-section{max-height:60vh;overflow:auto;border-radius:12px;box-shadow:0 1px 3px rgba(0,0,0,.05);}
.card{background:var(--card);border:1px solid var(--border);border-radius:16px;box-shadow:0 1px 3px rgba(0,0,0,.06);}
.info-card{transition:.2s ease;border-left:3px solid var(--primary);}
.info-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.08);}
.tab-btn{transition:.2s ease;font-weight:500;}
.tab-btn.active,.menu-tab-btn.active, .menu-subitem.active, .room-tab-btn.active {background:var(--primary) !important;color:#fff !important;}
.tab-btn:not(.active):hover{background:var(--hover) !important;}
.table-row{transition:background-color .2s ease;}
.table-row:hover{background-color:var(--row-hover);}
.loading-shimmer{background:linear-gradient(90deg,var(--shimmer-1) 25%,var(--shimmer-2) 50%,var(--shimmer-1) 75%);background-size:200% 100%;animation:loading 1.5s infinite;}
@keyframes loading{0%{background-position:200% 0}100%{background-position:-200% 0}}
.badge{display:inline-flex;align-items:center;gap:4px;font-weight:500;font-size:.75rem;}
.status-badge{padding:4px 8px;border-radius:100px;font-size:.75rem;font-weight:500;}
.status-active{background:var(--emerald-100);color:#166534;}
.status-inactive{background:var(--red-100);color:#991b1b;}
.search-form{width:40%; flex:1 1 auto;transition:width .4s ease;will-change:width;}
@media (max-width:1024px){
  .header-content{flex-direction:column;gap:16px;align-items:flex-start;}
  .search-form{width:100%;}
  .room-header{flex-direction:column;gap:12px;align-items:flex-start;}
}
.searchFocus{max-width:100%}
.menu-item{transition:all .2s ease;}
.menu-item:hover{background-color:var(--menu-hover);padding-left:1.5rem;}
.day-card{transition:.25s ease;overflow:hidden}
.day-card:hover{transform:translateY(-3px)}
.selected{box-shadow:0 0 0 3px rgba(16,185,129,.5),0 10px 18px -6px rgba(16,185,129,.35)}
.badge-dot{width:28px;height:28px;border-radius:9999px;display:inline-flex;align-items:center;justify-content:center;border:1px solid transparent;transition:.2s}
.badge-dot.grayed{filter:grayscale(1);opacity:.45;border-color:rgba(0,0,0,.08)}
.fade-in{animation:fadein .35s ease}
@keyframes fadein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.soft-scrollbar::-webkit-scrollbar{height:8px;width:8px}
.soft-scrollbar::-webkit-scrollbar-thumb{background:var(--scroll-thumb);border-radius:999px}
.soft-scrollbar::-webkit-scrollbar-thumb:hover{background:var(--scroll-thumb-hover)}
.soft-scrollbar::-webkit-scrollbar-track{background:transparent}

.bg-app{background-color:var(--bg)!important;}
.bg-card{background-color:var(--card)!important;}
.bg-white{background-color:#ffffff!important;}           /* თუ გინდა პირდაპირი 1:1 ჩანაცვლება */
.bg-slate-50{background-color:var(--slate-50)!important;}
.bg-slate-100{background-color:var(--slate-100)!important;}
.bg-gray-900{background-color:var(--gray-900)!important;}
.bg-emerald-500{background-color:var(--emerald-500)!important;}
.bg-teal-600{background-color:var(--teal-600)!important;}
.bg-blue-500{background-color:var(--blue-500)!important;}

.text-app{color:var(--text)!important;}
.text-primary{color:var(--text-primary)!important;}
.text-secondary{color:var(--text-secondary)!important;}
.text-white{color:#ffffff!important;}
.text-black{color:#000000!important;}
.text-slate-100{color:var(--slate-100)!important;}
.text-slate-900{color:var(--slate-900)!important;}

.border-base{border-color:var(--border)!important;}
.border-slate-200{border-color:var(--slate-200)!important;}
.border-gray-200{border-color:var(--gray-200)!important;}
.border-gray-700{border-color:var(--gray-700)!important;}

.hover-bg{background-color:var(--hover)!important;}
.row-hover-bg{background-color:var(--row-hover)!important;}

.btn-primary{background:var(--primary);color:#fff;}
.btn-primary:hover{background:var(--primary-dark);}

.btn-secondary{background:var(--secondary);color:#fff;}
.btn-secondary:hover{background:var(--secondary-dark);}

.btn-create{background:var(--create);color:#fff;}
.btn-create:hover{background:var(--create-dark);}

body[theme="dark"] .dark\:bg-gray-900{ background-color: var(--gray-900) !important; }
body[theme="dark"] .dark\:text-white{ color:#ffffff !important; }
body[theme="dark"] .dark\:border-gray-700{ border-color: var(--gray-700) !important; }

.badge--islamic     { background: var(--emerald-100); color: #166534; border-color: var(--emerald-200); }
.badge--christian   { background: var(--blue-100);    color: #1e40af; border-color: var(--blue-200); }
.badge--jewish      { background: #f3e8ff;            color: #6b21a8; border-color: #e9d5ff; }
.badge--birthday    { background: var(--red-100);     color: #991b1b; border-color: var(--red-200); }
.badge--independence{ background: #fef3c7;            color: #92400e; border-color: #fde68a; }

body[theme="dark"] .badge--islamic     { background: #0b3b33; color: #a7f3d0; border-color: #0f5b4f; }
body[theme="dark"] .badge--christian   { background: #0b1f3a; color: #93c5fd; border-color: #133a6a; }
body[theme="dark"] .badge--jewish      { background: #2e1b3a; color: #d8b4fe; border-color: #4b2360; }
body[theme="dark"] .badge--birthday    { background: #3a0b0b; color: #fecaca; border-color: #5b1515; }
body[theme="dark"] .badge--independence{ background: #3b2a0b; color: #fde68a; border-color: #5b400f; }


html, body {
  font-family: "Noto Sans Georgian VF, BPG Glaho Sylfaen, Noto Sans Georgian", system-ui, -apple-system, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, "Apple Color Emoji",
               "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  line-height: 1.5;
}

h1, h2, h3, .serif, :lang(ka).serif {
  font-family: "Noto Sans Georgian VF, BPG Glaho Sylfaen, Noto Sans Georgian", system-ui, -apple-system, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, "Apple Color Emoji",
               "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  line-height: 1.5;
}

.logo {
  background-image: url(/assets/1.0.0/desk/image/logo.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}


.loading-spinner {
  animation: spin 1s linear infinite;
}

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

@supports (backdrop-filter: blur(10px)) {
  .backdrop-blur-sm {
    backdrop-filter: blur(4px);
  }
}

.border-emerald-200 {
  border-color: var(--emerald-200);
}
.border-amber-200 {
  border-color: var(--amber-200);
}
.border-red-200 {
  border-color: var(--red-200);
}

body[theme="dark"] .border-emerald-800 {
  border-color: var(--emerald-800);
}
body[theme="dark"] .border-amber-800 {
  border-color: var(--amber-800);
}
body[theme="dark"] .border-red-800 {
  border-color: var(--red-800);
}

body[theme="dark"] .text-emerald-400 {
  color: var(--emerald-400);
}
body[theme="dark"] .text-amber-400 {
  color: var(--amber-400);
}
body[theme="dark"] .text-red-400 {
  color: var(--red-400);
}


.login_bg{
  background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%) !important;
}

.language-card {
    transition: all 0.3s ease;
    border: 2px solid transparent;
}
.language-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.15);
}
.selected {
  border-color: #059669;
  background-color: #059669;
  color: var(--gray-100);
}

doby[theme="dark"] .selected {
  border-color: #10b981;
  background-color: #10b981;
  color: var(--gray-800);
}  
  

.flag-icon {
    width: 32px;
    height: 32px;
    border-radius: 0%;
    object-fit: contain;
}

.idcard-frame { box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.skeleton-layer { border-radius: 12px; }
.idcard-img[data-loaded="1"] + .skeleton-layer,
.idcard-frame:has(.idcard-img[data-loaded="1"]) .skeleton-layer {
  display: none;
}


table {
  color: var(--text-primary);
}

table >*{
  border-color: var(--border);
}

table thead th {
  color: var(--text-primary);
  background: var(--card);
  border-color: var(--border);
}

table tbody tr {
  transition: background-color .18s ease, transform .12s ease;
  border-color: var(--border);
}

table td {
  border-color: var(--border);
}

table tbody tr {
  background: var(--card);
  border: 1px solid var(--border);
}

table thead th {
  cursor: pointer;
}

table tbody tr:focus-within,
table tbody tr:focus {
  outline: 3px solid rgba(16,185,129,0.12);
  outline-offset: -3px;
}

.table-scroll {
  overflow: auto;           
  scrollbar-gutter: stable; 
}

.table-scroll,.custom-select-list {
  scrollbar-width: thin;                 
  scrollbar-color: #cbd5e1 transparent; 
  border : 0.5px solid var(--border--);
}

body[theme="dark"] .table-scroll {
  scrollbar-color: #475569 transparent; 
  scrollbar-gutter: var(--blue-400);
}

.table-scroll::-webkit-scrollbar,
.custom-select-list::-webkit-scrollbar
{
  width: 10px;   
  height: 10px; 
}

.table-scroll::-webkit-scrollbar-track,
.custom-select-list::-webkit-scrollbar-track
{
  background: transparent;
  border : 0.5px solid var(--border--);
}

.table-scroll::-webkit-scrollbar-thumb:hover,
.custom-select-list::-webkit-scrollbar-thumb:hover
{
  background: #94a3b8;
  background-clip: content-box;
}

body[theme="dark"]  .table-scroll::-webkit-scrollbar-thumb:hover {
  background: #64748b;
  background-clip: content-box;

}

.table-scroll::-webkit-scrollbar-thumb,
.custom-select-list::-webkit-scrollbar-thumb
{
  border : 0.5px solid var(--border--);
  background: transparent;
  background-clip: content-box;
  border : 0.5px solid var(--border--);
}
.table-scroll:hover::-webkit-scrollbar-thumb,
.custom-select-list:hover::-webkit-scrollbar-thumb

{
  background: #cbd5e1;
  background-clip: content-box;
}

body[theme="dark"]  .table-scroll:hover::-webkit-scrollbar-thumb {
  background: #475569;
  background-clip: content-box;
  border : 0.5px solid var(--border--);
}

body[theme="dark"]  .custom-select-list:hover::-webkit-scrollbar-thumb {
  background: #475569;
  background-clip: content-box;
  border : 0.5px solid var(--border--);
}

.table-container >*{
  border-color: var(--border) !important;
}

input, select, textarea {
  background-color: var(--card);
  color: var(--text-primary);
  border: 1px solid var(--border);
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}

input:focus, select:focus, textarea:focus {
  border-color: var(--text-secondary);
}

.table-group-head { text-align: center; font-weight: 700; }

.table-vhead {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  height: 110px;
  vertical-align: bottom;
  padding: 8px 6px;
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 240px;
}

.table-wrap-2 {
  white-space: normal !important;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
}

.table-ellipsis-1 {
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 240px; /* სურვილისამებრ */
}

.is-invalid{
  border-color: var(--red-500) !important;
}

.bg-opasity-10{
  background-color: rgba(255,255,255,0.1) !important;
}
.bg-opasity-20{
  background-color: rgba(255,255,255,0.2) !important;
}
.bg-opasity-30{
  background-color: rgba(255,255,255,0.3) !important;
}
.bg-opasity-40{
  background-color: rgba(255,255,255,0.4) !important;
}
.bg-opasity-50{
  background-color: rgba(255,255,255,0.5) !important;
}
.bg-opasity-60{
  background-color: rgba(255,255,255,0.6) !important;
}
.bg-opasity-70{
  background-color: rgba(255,255,255,0.7) !important;
}
.bg-opasity-80{
  background-color: rgba(255,255,255,0.8) !important;
}
.bg-opasity-90{
  background-color: rgba(255,255,255,0.9) !important;
}
.bg-opasity-100{
  background-color: rgba(255,255,255,1) !important;
}

body[theme="dark"] .bg-opasity-10{
  background-color: rgba(0,0,0,0.1) !important;
}
body[theme="dark"] .bg-opasity-20{
  background-color: rgba(0,0,0,0.2) !important;
}
body[theme="dark"] .bg-opasity-30{
  background-color: rgba(0,0,0,0.3) !important;
}
body[theme="dark"] .bg-opasity-40{
  background-color: rgba(0,0,0,0.4) !important;
}
body[theme="dark"] .bg-opasity-50{
  background-color: rgba(0,0,0,0.5) !important;
}
body[theme="dark"] .bg-opasity-60{
  background-color: rgba(0,0,0,0.6) !important;
}
body[theme="dark"] .bg-opasity-70{
  background-color: rgba(0,0,0,0.7) !important;
}
body[theme="dark"] .bg-opasity-80{
  background-color: rgba(0,0,0,0.8) !important;
}
body[theme="dark"] .bg-opasity-90{
  background-color: rgba(0,0,0,0.9) !important;
}
body[theme="dark"] .bg-opasity-100{
  background-color: rgba(0,0,0,1) !important;
}

.files-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.file-card {
    border-radius: 10px;
    padding: 20px;
    transition: all 0.3s;
    cursor: pointer;
}

.file-card:hover {
    transform: translateY(-5px);
}

.file-icon {
    font-size: 40px;
    margin-bottom: 15px;
}

.file-name {
    font-weight: 600;
    margin-bottom: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-info {
    font-size: 14px;
    display: flex;
    justify-content: space-between;
}

.file-size {
    font-weight: 500;
}

/* ფოლდერი - ნარინჯისფერი */
.file-icon.folder {
    color: #f39c12;
}

/* სურათები - მწვანე */
.file-icon.image {
    color: #2ecc71;
}

/* დოკუმენტები (Word, TXT და ა.შ.) - ლურჯი */
.file-icon.document, .file-icon.docx {
    color: #4a6fa5;
}

/* PDF - მკვეთრი წითელი */
.file-icon.pdf {
    color: #e74c3c;
}

/* კოდი - იასამნისფერი */
.file-icon.code {
    color: #9b59b6;
}

/* აუდიო - ვარდისფერი/წითელი */
.file-icon.audio {
    color: #f06292;
}

/* ვიდეო - მუქი ლურჯი/იასამნისფერი */
.file-icon.video {
    color: #5c6bc0;
}

/* ექსელი - მწვანე (Excel-ის სტანდარტული ფერი) */
.file-icon.xlsx {
    color: #27ae60;
}

/* არქივები (Zip) - ნაცრისფერი ან ყავისფერი */
.file-icon.zip {
    color: #95a5a6;
}