/* ==========================================================================
   FK WEB RENT - Classic Windows 98/XP Theme
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Tahoma&display=swap');

:root{
  --win-grey: #c0c0c0;
  --win-grey-dark: #808080;
  --win-grey-darker: #404040;
  --win-grey-light: #dfdfdf;
  --win-face: #ece9d8;
  --win-blue-dark: #0a246a;
  --win-blue-mid: #3a6ea5;
  --win-blue-light: #a6caf0;
  --win-titlebar: linear-gradient(180deg,#2158c7 0%,#3a7be0 8%,#3a7be0 40%,#2158c7 92%,#0e3a9e 100%);
  --win-titlebar-inactive: linear-gradient(180deg,#8c8c8c 0%,#a9a9a9 40%,#8c8c8c 100%);
  --win-desktop: #1a3a6b;
  --win-green: #2e7d32;
  --win-red: #b71c1c;
  --win-yellow: #ffd54f;
  --font-win: Tahoma, Verdana, Arial, sans-serif;
}

*{ box-sizing: border-box; }

body{
  margin:0;
  font-family: var(--font-win);
  font-size: 13px;
  background: var(--win-desktop);
  background-image:
    radial-gradient(circle at 15% 15%, rgba(255,255,255,0.04) 0, transparent 40%),
    linear-gradient(135deg,#1a3a6b 0%, #2a5599 100%);
  color:#111;
  min-height:100vh;
  padding-bottom: 52px; /* keeps content clear of the fixed taskbar at the bottom */
}

a { color: #0a246a; }

/* ---------- Scrollbar (classic chunky) ---------- */
::-webkit-scrollbar{ width:16px; height:16px; }
::-webkit-scrollbar-track{ background: var(--win-grey); }
::-webkit-scrollbar-thumb{
  background: var(--win-grey);
  border: 2px outset var(--win-grey);
}
::-webkit-scrollbar-button{
  background: var(--win-grey);
  border: 2px outset var(--win-grey);
}

/* ---------- Window Chrome ---------- */
.win-window{
  background: var(--win-face);
  border: 2px solid;
  border-color: #fff #0a0a0a #0a0a0a #fff;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.35);
  outline: 1px solid #000;
  outline-offset: -3px;
}

.win-titlebar{
  background: var(--win-titlebar);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 3px 4px 3px 6px;
  font-weight:bold;
  font-size:13px;
  letter-spacing:.2px;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.4);
  user-select:none;
}
.win-titlebar.inactive{ background: var(--win-titlebar-inactive); }

.win-titlebar .win-title-left{
  display:flex; align-items:center; gap:6px;
}
.win-titlebar .win-title-left img,
.win-titlebar .win-title-left .icon{
  width:16px; height:16px;
}

.win-titlebar-buttons{ display:flex; gap:3px; }
.win-titlebar-buttons button{
  width:20px; height:19px;
  background: var(--win-grey);
  border: 1px solid;
  border-color:#fff #404040 #404040 #fff;
  font-size:11px;
  font-family: var(--font-win);
  font-weight:bold;
  cursor:pointer;
  color:#000;
  display:flex; align-items:center; justify-content:center;
  padding:0;
}
.win-titlebar-buttons button:active{
  border-color:#404040 #fff #fff #404040;
}
.win-titlebar-buttons button.close-btn{ background:#c0c0c0; }

.win-menubar{
  background: var(--win-face);
  border-bottom: 1px solid var(--win-grey-dark);
  display:flex;
  gap:2px;
  padding:2px 4px;
  font-size:12px;
}
.win-menubar span{
  padding:3px 8px;
  cursor:pointer;
}
.win-menubar span:hover{
  background: var(--win-blue-dark);
  color:#fff;
}

.win-body{
  padding: 14px;
}

/* ---------- Buttons ---------- */
.win-btn{
  background: var(--win-grey);
  border: 2px solid;
  border-color: #fff #404040 #404040 #fff;
  padding: 6px 16px;
  font-family: var(--font-win);
  font-size: 13px;
  cursor: pointer;
  color:#000;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-width: 80px;
}
.win-btn:active{
  border-color: #404040 #fff #fff #404040;
  padding-top:7px; padding-left:17px;
}
.win-btn:disabled{
  color: #808080;
  cursor: not-allowed;
}
.win-btn:focus-visible{
  outline: 1px dotted #000;
  outline-offset: -4px;
}

.win-btn-primary{
  background: var(--win-blue-mid);
  color:#fff;
  border-color:#a6caf0 #0a246a #0a246a #a6caf0;
  font-weight:bold;
}

.win-btn-danger{
  background: #d9534f;
  color:#fff;
  border-color:#f5a9a7 #6b1f1c #6b1f1c #f5a9a7;
}

.win-btn-success{
  background: #4a9950;
  color:#fff;
  border-color:#a6e0ab #1e4d21 #1e4d21 #a6e0ab;
}

.win-btn-sm{ padding:3px 10px; font-size:12px; min-width:auto; }

/* ---------- Inputs (recessed / sunken look) ---------- */
.win-field{ margin-bottom:12px; }
.win-field label{
  display:block;
  font-size:12px;
  font-weight:bold;
  margin-bottom:4px;
}

.win-input, .win-select, textarea.win-input{
  width:100%;
  padding:6px 8px;
  font-family: var(--font-win);
  font-size:13px;
  background:#fff;
  border: 2px solid;
  border-color: #808080 #fff #fff #808080;
  outline:none;
}
.win-input:focus, .win-select:focus, textarea.win-input:focus{
  border-color:#0a246a #a6caf0 #a6caf0 #0a246a;
}

.win-checkbox-row{ display:flex; align-items:center; gap:6px; margin-bottom:10px; }

.copy-row{ display:flex; gap:6px; align-items:stretch; }
.copy-row .win-input{ flex:1; min-width:0; }
.copy-row .win-btn{ flex-shrink:0; white-space:nowrap; }

/* ---------- Panel / Groupbox (sunken container) ---------- */
.win-panel{
  background: var(--win-face);
  border: 2px solid;
  border-color: #808080 #fff #fff #808080;
  padding: 12px;
}

.win-groupbox{
  border: 1px solid var(--win-grey-dark);
  border-radius:2px;
  padding: 14px 12px 12px;
  position:relative;
  margin: 16px 0 10px;
}
.win-groupbox legend{
  position:absolute;
  top:-9px; left:10px;
  background: var(--win-face);
  padding:0 6px;
  font-weight:bold;
  font-size:12px;
}

/* ---------- Status bar ---------- */
.win-statusbar{
  border-top: 1px solid #fff;
  background: var(--win-face);
  display:flex;
  padding:3px;
  font-size:11px;
}
.win-statusbar > div{
  border: 1px solid;
  border-color:#808080 #fff #fff #808080;
  padding:2px 8px;
  margin-right:2px;
  flex:1;
}

/* ---------- Badges ---------- */
.win-badge{
  display:inline-block;
  padding:2px 10px;
  font-size:11px;
  font-weight:bold;
  border:1px solid;
  border-radius:2px;
}
.badge-pending{ background:#fff3cd; border-color:#c9a227; color:#7a5c00;}
.badge-processing{ background:#cfe2ff; border-color:#3a6ea5; color:#0a246a;}
.badge-active{ background:#d4edda; border-color:#2e7d32; color:#1e4d21;}
.badge-disabled{ background:#f8d7da; border-color:#b71c1c; color:#6b1f1c;}

/* ---------- Unread dot ---------- */
.unread-dot{
  display:inline-block;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#dc3545;
  border:1px solid #7a1420;
  margin-left:6px;
  vertical-align:middle;
}
.sidebar-nav a{ position:relative; }
.nav-dropdown .win-dropdown-item{ position:relative; }

/* ---------- Table ---------- */
.win-table{
  width:100%;
  border-collapse:collapse;
  background:#fff;
  font-size:12.5px;
}
.win-table th{
  background: var(--win-grey);
  border: 1px solid;
  border-color:#fff #404040 #404040 #fff;
  padding:6px 8px;
  text-align:left;
  font-weight:bold;
}
.win-table td{
  border:1px solid #d4d0c8;
  padding:6px 8px;
}
.win-table tr:nth-child(even) td{ background:#f4f4f4; }
.win-table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* ---------- Desktop / Taskbar (used on landing/dashboard shells) ---------- */
.win-taskbar{
  position:fixed; bottom:0; left:0; right:0;
  height:40px;
  background: linear-gradient(180deg,#245edb 0%,#1941a5 100%);
  border-top:2px solid #6a97e8;
  display:flex;
  align-items:center;
  z-index:1000;
  padding:0 4px;
  gap:6px;
}
.win-start-btn{
  background: linear-gradient(180deg,#4caf50,#2e7d32);
  color:#fff;
  font-weight:bold;
  font-style:italic;
  border-radius: 4px;
  padding:5px 16px 5px 10px;
  border:1px solid #1e4d21;
  display:flex; align-items:center; gap:6px;
  cursor:pointer;
  font-size:14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
}
.win-taskbar-clock{
  margin-left:auto;
  background: linear-gradient(180deg,#1941a5,#0a246a);
  border:1px solid #0a1e4d;
  border-radius:3px;
  padding:6px 12px;
  color:#fff;
  font-size:12px;
}
.win-taskbar-item{
  background: rgba(255,255,255,0.12);
  border:1px solid rgba(255,255,255,0.2);
  border-radius:3px;
  color:#fff;
  padding:6px 12px;
  font-size:12px;
  cursor:pointer;
  display:none;
}

/* ---------- Icon rail (desktop icons style nav) ---------- */
.win-icon-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(90px,1fr));
  gap:14px;
}
.win-desktop-icon{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:10px 4px;
  text-align:center;
  cursor:pointer;
  border:1px dotted transparent;
  color:#fff;
  text-decoration:none;
  font-size:12px;
  text-shadow:1px 1px 2px rgba(0,0,0,0.8);
}
.win-desktop-icon:hover{ border-color: rgba(255,255,255,0.4); }
.hicon{
  display:inline-block;
  vertical-align:-0.15em;
  color:#000;
  stroke:#000;
}
.win-desktop-icon .icon-box .hicon{ width:24px; height:24px; }
.win-btn .hicon, .win-btn-primary .hicon{ vertical-align:-0.2em; margin-right:2px; }
.win-desktop-icon .icon-box{
  width:42px; height:42px;
  background: linear-gradient(160deg,#eaf3ff,#a6caf0);
  border:2px solid #fff;
  border-radius:4px;
  display:flex; align-items:center; justify-content:center;
  font-size:22px;
  box-shadow: 2px 2px 4px rgba(0,0,0,0.4);
}

/* ---------- Layout shells ---------- */
.app-shell{
  min-height:100vh;
  padding: 18px 18px 60px;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.app-window{
  width:100%;
  max-width:1180px;
}

.dash-layout{
  display:grid;
  grid-template-columns: 220px 1fr;
  gap:14px;
}
.dash-sidebar{ }
.dash-main{ min-width:0; }

.nav-dropdown{ display:none; }

.win-dropdown{ position:relative; }
.win-dropdown-toggle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  cursor:pointer;
  text-align:left;
}
.win-dropdown-toggle .win-dropdown-current{
  display:flex;
  align-items:center;
  gap:6px;
  font-weight:bold;
}
.win-dropdown-caret{ font-size:10px; }
.win-dropdown-menu{
  display:none;
  position:absolute;
  top:100%;
  left:0;
  right:0;
  z-index:50;
  margin-top:4px;
  background: transparent;
  border:none;
  box-shadow:none;
  max-height:60vh;
  overflow-y:auto;
  flex-direction:column;
  gap:3px;
}
.win-dropdown.open .win-dropdown-menu{ display:flex; }
.win-dropdown-item{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  color:#000;
  text-decoration:none;
  font-size:13px;
  background: var(--win-grey);
  border: 2px solid;
  border-color: #fff #404040 #404040 #fff;
  box-shadow: 1px 1px 3px rgba(0,0,0,0.35);
}
.win-dropdown-item:hover{
  background: var(--win-grey-light, #d4d0c8);
}
.win-dropdown-item:active{
  border-color: #404040 #fff #fff #404040;
  padding-top:9px; padding-left:14px;
}
.win-dropdown-item.active{
  background: var(--win-blue-mid);
  color:#fff;
  font-weight:bold;
  border-color:#a6caf0 #0a246a #0a246a #a6caf0;
}

.sidebar-nav a{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  text-decoration:none;
  color:#000;
  font-size:12.5px;
  background: var(--win-grey);
  border: 2px solid;
  border-color: #fff #404040 #404040 #fff;
  margin-bottom:3px;
}
.sidebar-nav a:hover{
  background: var(--win-grey-light);
}
.sidebar-nav a:active{
  border-color: #404040 #fff #fff #404040;
}
.sidebar-nav a.active{
  background: var(--win-blue-mid);
  color:#fff;
  font-weight:bold;
  border-color:#a6caf0 #0a246a #0a246a #a6caf0;
}
.sidebar-nav .icon{ font-size:16px; width:20px; text-align:center; }

/* ---------- Stat cards ---------- */
.stat-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px,1fr));
  gap:12px;
  margin-bottom:16px;
}
.stat-card{
  background:#fff;
  border:2px solid;
  border-color:#fff #808080 #808080 #fff;
  padding:14px;
}
.stat-card .stat-label{ font-size:11px; color:#555; text-transform:uppercase; letter-spacing:.5px;}
.stat-card .stat-value{ font-size:24px; font-weight:bold; color:#0a246a; margin-top:4px;}
.stat-card .stat-icon{ font-size:26px; float:right; opacity:.7; }

/* ---------- Template / Plan cards ---------- */
.card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:14px;
}
.win-card{
  background:#fff;
  border:2px solid;
  border-color:#fff #808080 #808080 #fff;
  display:flex; flex-direction:column;
}
.win-card img{
  width:100%; height:130px; object-fit:cover;
  border-bottom:1px solid #808080;
  background:#eee;
}
.win-card .win-card-body{ padding:10px; flex:1; display:flex; flex-direction:column;}
.win-card h4{ margin:0 0 6px; font-size:14px; }
.win-card p{ font-size:12px; color:#333; flex:1; }
.win-card .price-tag{
  font-weight:bold; color: var(--win-green); font-size:15px; margin:6px 0;
}
.win-card ul{ font-size:11.5px; padding-left:18px; margin:6px 0;}

/* ---------- Modal / popup (message box style) ---------- */
.win-modal-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,0.45);
  display:flex; align-items:center; justify-content:center;
  z-index:2000; padding:16px;
}
.win-modal{
  width:100%; max-width:420px;
}
.win-modal .win-body{ text-align:center; }
.win-modal .msg-icon{ font-size:34px; margin-bottom:8px; }

/* ---------- Login / register screens ---------- */
.auth-wrap{
  display:flex; align-items:center; justify-content:center;
  min-height:100vh; padding:20px;
}
.auth-window{ width:100%; max-width:400px; }

/* ---------- Alerts ---------- */
.win-alert{
  border:1px solid;
  padding:8px 10px;
  margin-bottom:10px;
  font-size:12.5px;
  display:flex;
  align-items:center;
  gap:8px;
}
.win-alert-success{ background:#d4edda; border-color:#2e7d32; color:#1e4d21;}
.win-alert-error{ background:#f8d7da; border-color:#b71c1c; color:#6b1f1c;}
.win-alert-info{ background:#cfe2ff; border-color:#3a6ea5; color:#0a246a;}

/* ---------- Utility ---------- */
.text-center{ text-align:center; }
.mt-1{ margin-top:8px;} .mt-2{ margin-top:16px;} .mt-3{ margin-top:24px;}
.mb-1{ margin-bottom:8px;} .mb-2{ margin-bottom:16px;} .mb-3{ margin-bottom:24px;}
.flex-between{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px;}
.win-tag{
  display:inline-block; background:var(--win-yellow); border:1px solid #a08000;
  padding:1px 6px; font-size:10.5px; margin-right:4px; border-radius:2px;
}
.star-amt{ color:#a87c00; font-weight:bold; }

/* ==========================================================================
   MOBILE RESPONSIVE
   ========================================================================== */
@media (max-width: 900px){
  .dash-layout{ grid-template-columns: 1fr; }
  .dash-sidebar{ order:1; }
  .dash-main{ order:2; }
  .nav-dropdown{ display:block; width:100%; font-weight:bold; }
  .sidebar-nav{ display:none; }
}

@media (max-width: 640px){
  body{ font-size:13px; }
  .app-shell{ padding:8px 8px 60px; }
  .win-body{ padding:10px; }
  .win-titlebar{ font-size:12px; padding:6px 4px 6px 6px; }
  .win-titlebar-buttons button{ width:26px; height:24px; font-size:13px; }
  .stat-grid{ grid-template-columns: repeat(2,1fr); }
  .stat-card{ padding:10px; }
  .stat-card .stat-value{ font-size:19px; }
  .card-grid{ grid-template-columns: 1fr 1fr; }
  .win-card img{ height:90px; }
  .win-table{ font-size:11.5px; }
  .win-btn{ padding:8px 14px; font-size:13px; }
  .win-icon-grid{ grid-template-columns:repeat(auto-fill, minmax(74px,1fr)); }
  .win-taskbar-item{ display:none; }
}

@media (max-width: 420px){
  .stat-grid{ grid-template-columns: 1fr 1fr; }
  .card-grid{ grid-template-columns: 1fr; }
  .win-modal{ max-width:100%; }
}