/* =========================================
   DIOCLES® BACKEND — Shared Styles
   Matches frontend: Forest Green + Lime
   ========================================= */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=Space+Grotesk:wght@300;400;500;600;700&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,700;1,400&display=swap');

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

:root {
  --brand: #2A3C34;
  --brand-dark: #1E2C25;
  --brand-light: #3A5147;
  --brand-50: #E8EDEB;
  --brand-100: #D0DAD5;
  --brand-200: #A8BAB1;
  --lime: #BFFF00;
  --lime-dark: #9CD100;
  --lime-glow: rgba(191,255,0,0.15);
  --white: #FFFFFF;
  --off-white: #F7F8F5;
  --gray-50: #FAFBF9;
  --gray-100: #F0F2EE;
  --gray-200: #E0E3DC;
  --gray-300: #B0B6AC;
  --gray-500: #6B7066;
  --gray-700: #3A3E36;
  --dark: #111210;
  --blue: #4285F4;
  --orange: #FF9800;
  --red: #EF4444;
  --purple: #8B5CF6;
  --sidebar-w: 260px;
  --header-h: 64px;
  --info-bar-h: 44px;
  --font-display: 'Syne', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --font-mono: 'Space Grotesk', sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --radius: 16px;
  --radius-sm: 10px;
  --radius-xs: 6px;
}

html { font-size:16px; -webkit-font-smoothing:antialiased; }
body { font-family:var(--font-body); background:var(--gray-50); color:var(--gray-700); line-height:1.5; overflow-x:hidden; }
a { text-decoration:none; color:inherit; }
ul { list-style:none; }
img { max-width:100%; display:block; }
button { cursor:pointer; border:none; background:none; font-family:inherit; }
input, select, textarea { font-family:var(--font-body); }

/* ====== HEADER ====== */
.header { position:fixed; top:0; left:0; right:0; height:var(--header-h); background:rgba(255,255,255,0.95); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border-bottom:1px solid var(--gray-200); z-index:100; display:flex; align-items:center; padding:0 20px; }
.header__burger { display:none; flex-direction:column; gap:4px; padding:8px; z-index:101; }
.header__burger span { display:block; width:20px; height:2px; background:var(--brand); border-radius:2px; transition:all 0.3s; }
.header__burger.open span:nth-child(1) { transform:rotate(45deg) translate(4px,4px); }
.header__burger.open span:nth-child(2) { opacity:0; }
.header__burger.open span:nth-child(3) { transform:rotate(-45deg) translate(4px,-4px); }
.header__logo { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); }
.header__logo img { height:44px; width:auto; }
.header__right { margin-left:auto; display:flex; align-items:center; gap:12px; }
.header__notif { position:relative; width:36px; height:36px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:var(--gray-100); transition:all 0.3s; font-size:1.1rem; }
.header__notif:hover { background:var(--brand-50); }
.header__notif-badge { position:absolute; top:2px; right:2px; width:8px; height:8px; background:var(--red); border-radius:50%; border:2px solid var(--white); }
.header__avatar { width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg,var(--brand),var(--brand-light)); display:flex; align-items:center; justify-content:center; color:var(--white); font-family:var(--font-display); font-weight:700; font-size:0.8rem; }
.header__user { display:flex; align-items:center; gap:10px; padding:4px 12px 4px 4px; border-radius:100px; transition:all 0.3s; }
.header__user:hover { background:var(--gray-100); }
.header__user-name { font-family:var(--font-mono); font-size:0.82rem; font-weight:500; }

/* ====== INFO BAR ====== */
.info-bar { position:fixed; top:var(--header-h); left:0; right:0; height:var(--info-bar-h); background:var(--brand); z-index:99; display:flex; align-items:center; justify-content:center; gap:32px; padding:0 20px; overflow-x:auto; }
.info-bar__item { display:flex; align-items:center; gap:8px; white-space:nowrap; font-family:var(--font-mono); font-size:0.78rem; font-weight:500; color:rgba(255,255,255,0.6); }
.info-bar__value { color:var(--lime); font-weight:700; font-size:0.82rem; }
.info-bar__icon { font-size:0.9rem; }
.info-bar__divider { width:1px; height:18px; background:rgba(255,255,255,0.12); flex-shrink:0; }

/* ====== SIDEBAR ====== */
.sidebar-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.4); z-index:89; opacity:0; pointer-events:none; transition:opacity 0.3s; }
.sidebar-overlay.open { opacity:1; pointer-events:auto; }
.sidebar { position:fixed; top:calc(var(--header-h)+var(--info-bar-h)); left:0; bottom:0; width:var(--sidebar-w); background:var(--white); border-right:1px solid var(--gray-200); z-index:90; display:flex; flex-direction:column; overflow-y:auto; padding:20px 12px; transition:transform 0.4s var(--ease); }
.sidebar__section { margin-bottom:24px; }
.sidebar__label { font-family:var(--font-display); font-weight:700; font-size:0.65rem; text-transform:uppercase; letter-spacing:2px; color:var(--gray-300); padding:0 12px; margin-bottom:8px; }
.sidebar__link { display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:var(--radius-sm); font-family:var(--font-mono); font-size:0.85rem; font-weight:500; color:var(--gray-500); transition:all 0.2s; }
.sidebar__link:hover { background:var(--brand-50); color:var(--brand); }
.sidebar__link.active { background:var(--brand); color:var(--white); }
.sidebar__icon { width:20px; text-align:center; font-size:1rem; opacity:0.7; flex-shrink:0; }
.sidebar__link.active .sidebar__icon { opacity:1; }
.sidebar__link--locked { opacity:0.45; pointer-events:none; }
.sidebar__lock { font-size:0.7rem; margin-left:auto; }
.sidebar__badge { margin-left:auto; background:var(--lime); color:var(--brand-dark); font-size:0.65rem; font-weight:700; padding:2px 8px; border-radius:100px; }
.sidebar__bottom { margin-top:auto; padding-top:16px; border-top:1px solid var(--gray-200); }
.sidebar__cta { display:flex; align-items:center; gap:10px; padding:12px 14px; background:var(--lime); color:var(--brand-dark); border-radius:var(--radius-sm); font-family:var(--font-display); font-weight:700; font-size:0.85rem; transition:all 0.3s var(--ease); justify-content:center; }
.sidebar__cta:hover { background:var(--lime-dark); transform:translateY(-1px); box-shadow:0 6px 20px rgba(191,255,0,0.3); }

/* ====== MAIN ====== */
.main { margin-left:var(--sidebar-w); margin-top:calc(var(--header-h)+var(--info-bar-h)); min-height:calc(100vh - var(--header-h) - var(--info-bar-h)); padding:32px; }

/* ====== PAGE HEADER ====== */
.page-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:28px; flex-wrap:wrap; gap:16px; }
.page-header__title { font-family:var(--font-display); font-weight:800; font-size:1.6rem; color:var(--brand-dark); display:flex; align-items:center; gap:10px; }
.page-header__sub { font-size:0.88rem; color:var(--gray-500); margin-top:2px; }
.page-header__actions { display:flex; gap:8px; }

/* ====== BUTTONS ====== */
.btn { display:inline-flex; align-items:center; gap:8px; padding:10px 20px; border-radius:100px; font-family:var(--font-display); font-weight:700; font-size:0.82rem; transition:all 0.3s var(--ease); cursor:pointer; border:none; }
.btn--primary { background:var(--brand); color:var(--white); }
.btn--primary:hover { background:var(--brand-dark); transform:translateY(-1px); box-shadow:0 8px 24px rgba(42,60,52,0.25); }
.btn--lime { background:var(--lime); color:var(--brand-dark); }
.btn--lime:hover { background:var(--lime-dark); transform:translateY(-1px); box-shadow:0 8px 24px rgba(191,255,0,0.3); }
.btn--outline { background:transparent; color:var(--brand); border:2px solid var(--gray-200); }
.btn--outline:hover { border-color:var(--brand); background:var(--brand-50); }
.btn--danger { background:var(--red); color:var(--white); }
.btn--sm { padding:8px 14px; font-size:0.78rem; }
.btn--icon { width:36px; height:36px; padding:0; justify-content:center; border-radius:var(--radius-sm); }

/* ====== CARDS ====== */
.card-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:16px; margin-bottom:32px; }
.card { background:var(--white); border:1px solid var(--gray-200); border-radius:var(--radius); padding:24px; transition:all 0.4s var(--ease); position:relative; overflow:hidden; }
.card:hover { transform:translateY(-3px); box-shadow:0 12px 32px rgba(0,0,0,0.06); border-color:var(--brand-100); }
.card__top { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.card__icon { width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.2rem; flex-shrink:0; background:var(--brand-50); }
.card__title { font-family:var(--font-display); font-weight:700; font-size:1rem; color:var(--brand-dark); }
.card__subtitle { font-family:var(--font-mono); font-size:0.72rem; color:var(--gray-300); margin-top:2px; }
.card__body { font-size:0.88rem; color:var(--gray-500); line-height:1.6; }
.card__footer { display:flex; gap:8px; margin-top:16px; flex-wrap:wrap; }

/* ====== STAT CARDS ====== */
.stats-row { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:32px; }
.stat-card { background:var(--white); border:1px solid var(--gray-200); border-radius:var(--radius); padding:20px; transition:all 0.4s var(--ease); position:relative; overflow:hidden; }
.stat-card::after { content:''; position:absolute; bottom:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--brand),var(--lime)); transform:scaleX(0); transform-origin:left; transition:transform 0.5s var(--ease); }
.stat-card:hover { transform:translateY(-3px); box-shadow:0 12px 32px rgba(0,0,0,0.06); }
.stat-card:hover::after { transform:scaleX(1); }
.stat-card__icon { font-size:1.4rem; margin-bottom:10px; }
.stat-card__value { font-family:var(--font-display); font-weight:800; font-size:1.8rem; color:var(--brand-dark); line-height:1; }
.stat-card__label { font-family:var(--font-mono); font-size:0.72rem; font-weight:600; text-transform:uppercase; letter-spacing:1.5px; color:var(--gray-300); margin-top:6px; }
.stat-card__trend { display:inline-flex; align-items:center; gap:4px; margin-top:8px; font-family:var(--font-mono); font-size:0.72rem; font-weight:600; padding:3px 8px; border-radius:100px; }
.stat-card__trend--up { background:rgba(191,255,0,0.15); color:#4A7A00; }
.stat-card__trend--down { background:rgba(239,68,68,0.1); color:#DC2626; }
.stat-card__trend--neutral { background:var(--gray-100); color:var(--gray-500); }

/* ====== MODULE TILES ====== */
.modules-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px,1fr)); gap:16px; margin-bottom:32px; }
.module-tile { background:var(--brand); border-radius:var(--radius); padding:28px 24px; display:flex; align-items:center; gap:18px; transition:all 0.4s var(--ease); cursor:pointer; position:relative; overflow:hidden; }
.module-tile:hover { transform:translateY(-4px); box-shadow:0 16px 48px rgba(42,60,52,0.3); }
.module-tile__icon { width:52px; height:52px; border-radius:14px; background:rgba(255,255,255,0.08); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:1.5rem; transition:all 0.3s; }
.module-tile:hover .module-tile__icon { background:var(--lime); }
.module-tile__text { font-family:var(--font-display); font-weight:700; font-size:1.05rem; color:var(--white); line-height:1.3; }
.module-tile__sub { font-family:var(--font-mono); font-size:0.72rem; color:rgba(255,255,255,0.45); margin-top:4px; }
.module-tile--locked { opacity:0.5; cursor:default; }
.module-tile--locked:hover { transform:none; box-shadow:none; }
.module-tile__lock { position:absolute; top:12px; right:12px; font-size:0.8rem; }

/* ====== SECTION HEADER ====== */
.section-title { font-family:var(--font-display); font-weight:700; font-size:1.1rem; color:var(--brand-dark); margin-bottom:16px; display:flex; align-items:center; gap:8px; }

/* ====== TABLE ====== */
.data-table { width:100%; border-collapse:collapse; background:var(--white); border-radius:var(--radius); overflow:hidden; border:1px solid var(--gray-200); }
.data-table th { font-family:var(--font-mono); font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:1.5px; color:var(--gray-300); padding:14px 16px; text-align:left; background:var(--gray-50); border-bottom:1px solid var(--gray-200); }
.data-table td { padding:14px 16px; font-size:0.88rem; border-bottom:1px solid var(--gray-100); color:var(--gray-700); }
.data-table tr:last-child td { border-bottom:none; }
.data-table tr:hover td { background:var(--brand-50); }
.data-table__wrap { border-radius:var(--radius); overflow:hidden; border:1px solid var(--gray-200); margin-bottom:32px; overflow-x:auto; }

/* ====== TAGS/BADGES ====== */
.tag { display:inline-flex; align-items:center; gap:4px; padding:3px 10px; border-radius:100px; font-family:var(--font-mono); font-size:0.68rem; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; }
.tag--green { background:var(--lime-glow); color:#4A7A00; }
.tag--blue { background:rgba(66,133,244,0.1); color:#1A56C4; }
.tag--orange { background:rgba(255,152,0,0.12); color:#B36B00; }
.tag--red { background:rgba(239,68,68,0.1); color:#DC2626; }
.tag--purple { background:rgba(139,92,246,0.1); color:#6D28D9; }
.tag--gray { background:var(--gray-100); color:var(--gray-500); }
.tag--brand { background:var(--brand-50); color:var(--brand); }

/* ====== FORMS ====== */
.form-group { margin-bottom:20px; }
.form-label { display:block; font-family:var(--font-display); font-weight:600; font-size:0.82rem; color:var(--brand); margin-bottom:6px; }
.form-input { width:100%; padding:12px 16px; border:2px solid var(--gray-200); border-radius:var(--radius-sm); font-size:0.9rem; transition:all 0.3s; background:var(--white); color:var(--gray-700); }
.form-input:focus { outline:none; border-color:var(--brand); box-shadow:0 0 0 4px rgba(42,60,52,0.1); }
.form-input--textarea { min-height:100px; resize:vertical; }
.form-select { appearance:none; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 10 10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 3l4 4 4-4' fill='none' stroke='%236B7066' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; background-size:12px; padding-right:36px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-card { background:var(--white); border:1px solid var(--gray-200); border-radius:var(--radius); padding:28px; margin-bottom:24px; }
.form-card__title { font-family:var(--font-display); font-weight:700; font-size:1rem; color:var(--brand-dark); margin-bottom:16px; }

/* ====== EMPTY STATE ====== */
.empty-state { text-align:center; padding:60px 24px; }
.empty-state__icon { font-size:3rem; margin-bottom:12px; }
.empty-state__title { font-family:var(--font-display); font-weight:700; font-size:1.1rem; color:var(--brand-dark); margin-bottom:6px; }
.empty-state__text { font-size:0.88rem; color:var(--gray-300); margin-bottom:20px; }

/* ====== RECENT ITEMS ====== */
.item-list { display:flex; flex-direction:column; gap:8px; margin-bottom:32px; }
.item-row { display:flex; align-items:center; gap:14px; padding:14px 16px; background:var(--white); border:1px solid var(--gray-200); border-radius:var(--radius-sm); transition:all 0.3s; cursor:pointer; }
.item-row:hover { border-color:var(--brand-200); box-shadow:0 4px 16px rgba(0,0,0,0.04); transform:translateY(-1px); }
.item-row__icon { width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.1rem; flex-shrink:0; }
.item-row__body { flex:1; min-width:0; }
.item-row__title { font-family:var(--font-display); font-weight:600; font-size:0.88rem; color:var(--brand-dark); }
.item-row__meta { font-family:var(--font-mono); font-size:0.7rem; color:var(--gray-300); margin-top:2px; }
.item-row__right { font-family:var(--font-mono); font-size:0.72rem; color:var(--gray-300); white-space:nowrap; display:flex; align-items:center; gap:8px; }

/* ====== PROGRESS BAR ====== */
.progress { height:6px; background:var(--gray-100); border-radius:100px; overflow:hidden; }
.progress__fill { height:100%; border-radius:100px; transition:width 0.6s var(--ease); }
.progress__fill--green { background:linear-gradient(90deg,var(--brand),var(--lime)); }
.progress__fill--blue { background:var(--blue); }
.progress__fill--orange { background:var(--orange); }

/* ====== CHART PLACEHOLDER ====== */
.chart-placeholder { background:var(--white); border:1px solid var(--gray-200); border-radius:var(--radius); padding:32px; margin-bottom:24px; min-height:300px; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:8px; color:var(--gray-300); }
.chart-placeholder__icon { font-size:2.5rem; }
.chart-placeholder__text { font-family:var(--font-mono); font-size:0.82rem; }

/* ====== SLIDER / RANGE ====== */
.range-group { margin-bottom:20px; }
.range-group__header { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.range-group__label { font-family:var(--font-display); font-weight:600; font-size:0.82rem; color:var(--brand); }
.range-group__value { font-family:var(--font-mono); font-size:0.88rem; font-weight:700; color:var(--brand-dark); }
input[type="range"] { width:100%; -webkit-appearance:none; height:6px; background:var(--gray-200); border-radius:100px; outline:none; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance:none; width:20px; height:20px; border-radius:50%; background:var(--brand); cursor:pointer; border:3px solid var(--white); box-shadow:0 2px 8px rgba(0,0,0,0.15); }

/* ====== TABS ====== */
.tabs { display:flex; gap:4px; margin-bottom:24px; background:var(--gray-100); padding:4px; border-radius:100px; width:fit-content; }
.tab { padding:8px 18px; border-radius:100px; font-family:var(--font-mono); font-size:0.78rem; font-weight:600; color:var(--gray-500); transition:all 0.2s; cursor:pointer; }
.tab:hover { color:var(--brand); }
.tab.active { background:var(--brand); color:var(--white); }

/* ====== QUICK ACTIONS ====== */
.quick-actions { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:32px; }
.quick-action { background:var(--white); border:2px dashed var(--gray-200); border-radius:var(--radius); padding:24px; text-align:center; transition:all 0.3s var(--ease); cursor:pointer; }
.quick-action:hover { border-color:var(--brand); background:var(--brand-50); transform:translateY(-2px); }
.quick-action__icon { font-size:1.6rem; margin-bottom:8px; }
.quick-action__label { font-family:var(--font-display); font-weight:700; font-size:0.9rem; color:var(--brand); }
.quick-action__desc { font-size:0.78rem; color:var(--gray-300); margin-top:4px; }

/* ====== WELCOME ====== */
.welcome { margin-bottom:32px; }
.welcome__greeting { font-family:var(--font-display); font-weight:800; font-size:clamp(1.6rem,3vw,2.2rem); color:var(--brand-dark); line-height:1.2; }
.welcome__greeting span { color:var(--lime-dark); }
.welcome__sub { font-size:0.95rem; color:var(--gray-500); margin-top:6px; }

/* ====== TWO-COL LAYOUT ====== */
.two-col { display:grid; grid-template-columns:1fr 340px; gap:24px; align-items:start; }

/* ====== FILTER BAR ====== */
.filter-bar { display:flex; gap:8px; margin-bottom:24px; flex-wrap:wrap; align-items:center; }
.filter-bar .form-input { width:auto; max-width:220px; padding:8px 14px; font-size:0.82rem; }
.filter-bar .form-select { width:auto; max-width:180px; padding:8px 14px 8px 14px; font-size:0.82rem; }

/* ====== ANIMATIONS ====== */
@keyframes fadeUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
.animate { animation:fadeUp 0.6s var(--ease) both; }
.d1 { animation-delay:0.05s; } .d2 { animation-delay:0.1s; } .d3 { animation-delay:0.15s; }
.d4 { animation-delay:0.2s; } .d5 { animation-delay:0.25s; }

/* ====== RESPONSIVE ====== */
@media (max-width:1100px) { .two-col { grid-template-columns:1fr; } }
@media (max-width:1024px) { .stats-row { grid-template-columns:repeat(2,1fr); } }
@media (max-width:900px) {
  .sidebar { transform:translateX(-100%); width:280px; top:0; padding-top:calc(var(--header-h)+var(--info-bar-h)+20px); box-shadow:20px 0 60px rgba(0,0,0,0.15); }
  .sidebar.open { transform:translateX(0); }
  .header__burger { display:flex; }
  .main { margin-left:0; }
}
@media (max-width:640px) {
  .stats-row { grid-template-columns:2; }
  .quick-actions { grid-template-columns:1fr; }
  .modules-grid { grid-template-columns:1fr; }
  .card-grid { grid-template-columns:1fr; }
  .form-row { grid-template-columns:1fr; }
  .main { padding:20px 16px; }
  .info-bar { gap:16px; justify-content:flex-start; }
  .page-header__title { font-size:1.3rem; }
}