:root{
    --bg:#EDF0F5;
    --panel:#FFFFFF;
    --panel-alt:#F7F8FB;
    --line:#DFE3EA;
    --line-soft:#EAEDF2;
    --navy:#0A1220;
    --navy-soft:#152238;
    --navy-softer:#1C2B45;
    --ink:#101827;
    --ink-soft:#5B6472;
    --ink-faint:#8A93A1;
    --brass:#AD7B32;
    --brass-deep:#8A611F;
    --brass-bg:#F6EDDC;
    --positive:#1E7F53;
    --positive-bg:#E5F4EC;
    --positive-line:#BFE2CD;
    --negative:#B23A2E;
    --negative-bg:#FBEAE7;
    --negative-line:#F0C7C0;
    --warning:#B8791C;
    --warning-bg:#FBF0DC;
    --warning-line:#EDD39C;
    --radius:10px;
    --radius-sm:6px;
    --shadow:0 1px 2px rgba(10,18,32,0.04), 0 8px 24px -12px rgba(10,18,32,0.10);
    --c-encos:#2E6E8E;
    --c-greenix:#B23A2E;
    --c-futurecode:#6B4C9A;
    --c-movetech:#AD7B32;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    font-family:'IBM Plex Sans',-apple-system,'Segoe UI',sans-serif;
    background:var(--bg);
    color:var(--ink);
    -webkit-font-smoothing:antialiased;
    font-size:14px;
  }
  .mono{font-family:'IBM Plex Mono',ui-monospace,monospace;}
  a{color:inherit;}
  ::selection{background:var(--brass-bg);color:var(--brass-deep);}

  /* ---------- App shell ---------- */
  #app{display:flex;min-height:100vh;}

  /* ---------- Sidebar ---------- */
  .sidebar{
    width:248px;
    flex:0 0 248px;
    background:linear-gradient(180deg,var(--navy) 0%, var(--navy-soft) 100%);
    color:#C9D2E0;
    display:flex;
    flex-direction:column;
    position:sticky;
    top:0;
    height:100vh;
  }
  .sidebar-brand{
    padding:22px 20px 18px 20px;
    border-bottom:1px solid rgba(255,255,255,0.08);
  }
  .sidebar-brand .mark{
    display:flex;align-items:center;gap:10px;
  }
  .sidebar-brand .mark-badge{
    width:34px;height:34px;border-radius:8px;
    background:linear-gradient(135deg,var(--brass) 0%, #7A5620 100%);
    display:flex;align-items:center;justify-content:center;
    font-family:'IBM Plex Mono';font-weight:700;font-size:13px;color:#FFF8EC;
    flex:0 0 34px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15);
  }
  .sidebar-brand .title{font-size:15px;font-weight:600;color:#F3F5F9;letter-spacing:0.01em;line-height:1.25;}
  .sidebar-brand .sub{font-size:11px;color:#8B96AC;margin-top:2px;font-family:'IBM Plex Mono';letter-spacing:0.02em;}

  .nav{flex:1;padding:14px 12px;overflow-y:auto;display:flex;flex-direction:column;}
  .nav-pinned{margin-top:auto;padding-top:10px;}
  .nav-divider{border-top:1px solid rgba(255,255,255,0.08);margin:0 4px 10px;}
  .nav-item{
    display:flex;align-items:center;gap:10px;
    padding:9px 10px;border-radius:8px;
    font-size:13.2px;color:#B7C0D2;cursor:pointer;
    margin-bottom:2px;
    transition:background .12s ease, color .12s ease;
    border-left:2px solid transparent;
  }
  .nav-item .num{
    font-family:'IBM Plex Mono';font-size:10.5px;color:#5C6883;
    width:18px;flex:0 0 18px;
  }
  .nav-item:hover{background:rgba(255,255,255,0.05);color:#EAEEF5;}
  .nav-item.active{
    background:rgba(173,123,50,0.16);
    color:#F3E9D6;
    border-left:2px solid var(--brass);
  }
  .nav-item.active .num{color:var(--brass);}

  .sidebar-footer{
    padding:14px 20px 18px 20px;
    border-top:1px solid rgba(255,255,255,0.08);
    font-size:11px;color:#6E7A93;
    font-family:'IBM Plex Mono';
    line-height:1.6;
  }
  .sidebar-footer #dataSourceStatus{display:inline-block;margin-top:4px;}
  .data-status-live{color:var(--positive);}
  .data-status-cache{color:var(--brass);}

  /* ---------- Main ---------- */
  .main{flex:1;min-width:0;display:flex;flex-direction:column;}
  .topbar{
    background:var(--panel);
    border-bottom:1px solid var(--line);
    padding:16px 28px;
    display:flex;align-items:center;justify-content:space-between;
    gap:16px;
    position:sticky;top:0;z-index:20;
  }
  .topbar h1{font-size:18px;margin:0;font-weight:600;letter-spacing:-0.01em;}
  .topbar .desc{font-size:12.5px;color:var(--ink-soft);margin-top:2px;}
  .topbar-right{display:flex;align-items:center;gap:10px;}
  .period-wrap{ text-align:right; position:relative; }
  .period-eyebrow{
    font-size:9.5px;text-transform:uppercase;letter-spacing:0.08em;
    color:var(--ink-faint);font-weight:600;margin-bottom:3px;
  }
  .period-controls{ display:flex; align-items:center; gap:6px; }
  .period-field{
    font-family:'IBM Plex Mono';font-size:12.5px;font-weight:600;color:var(--brass-deep);
    background:var(--brass-bg);border:1px solid var(--brass);
    padding:6px 12px;border-radius:20px;letter-spacing:0.02em;
    cursor:pointer;outline:none;
  }
  .period-field:hover{ background:#F1E3CB; }
  .period-field.active{ box-shadow:0 0 0 2px rgba(173,123,50,0.28); }
  .period-sep{ color:var(--ink-faint);font-weight:600; }
  .period-warn{ font-size:15px;cursor:help;line-height:1; }
  .refresh-btn{
    font-size:15px;line-height:1;color:var(--ink-soft);
    background:transparent;border:1px solid var(--line);
    width:28px;height:28px;border-radius:50%;
    cursor:pointer;outline:none;padding:0;
  }
  .refresh-btn:hover:not(:disabled){ color:var(--brass-deep);border-color:var(--brass);background:var(--brass-bg); }
  .refresh-btn:disabled{ opacity:0.45;cursor:progress; }
  .refresh-btn.spinning{ animation:spin 0.9s linear infinite; }
  @keyframes spin{ to{ transform:rotate(360deg); } }

  /* ---------- tarih aralığı takvimi ---------- */
  .period-popover{
    position:absolute;top:calc(100% + 8px);right:0;z-index:40;
    width:268px;padding:12px;text-align:left;
    background:var(--panel);border:1px solid var(--line);
    border-radius:var(--radius);box-shadow:var(--shadow);
  }
  .cal-presets{ display:flex;flex-wrap:wrap;gap:5px;margin-bottom:10px; }
  .cal-preset{
    font-size:11px;font-weight:600;color:var(--ink-soft);
    background:var(--panel-alt);border:1px solid var(--line);
    padding:4px 9px;border-radius:20px;cursor:pointer;outline:none;
  }
  .cal-preset:hover{ color:var(--brass-deep);border-color:var(--brass);background:var(--brass-bg); }
  .cal-head{ display:flex;align-items:center;gap:5px;margin-bottom:8px; }
  .cal-nav{
    font-size:15px;line-height:1;color:var(--ink-soft);
    background:transparent;border:1px solid var(--line);
    width:24px;height:24px;border-radius:var(--radius-sm);
    cursor:pointer;outline:none;padding:0;flex:none;
  }
  .cal-nav:hover{ color:var(--brass-deep);border-color:var(--brass); }
  .cal-select{
    flex:1;min-width:0;
    font-family:'IBM Plex Sans',sans-serif;font-size:12px;font-weight:600;color:var(--ink);
    background:var(--panel-alt);border:1px solid var(--line);
    padding:4px 6px;border-radius:var(--radius-sm);cursor:pointer;outline:none;
  }
  .cal-weekdays,.cal-grid{ display:grid;grid-template-columns:repeat(7,1fr);gap:2px; }
  .cal-weekdays{
    font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:0.04em;
    color:var(--ink-faint);text-align:center;margin-bottom:3px;
  }
  .cal-day{
    font-family:'IBM Plex Mono';font-size:11.5px;color:var(--ink);
    background:transparent;border:1px solid transparent;
    height:30px;border-radius:var(--radius-sm);
    cursor:pointer;outline:none;padding:0;
  }
  .cal-blank{ cursor:default; }
  .cal-day:hover:not(:disabled):not(.cal-edge){ border-color:var(--brass);color:var(--brass-deep); }
  /* seçili aralığın içi soluk, iki ucu dolu */
  .cal-in{ background:var(--brass-bg);color:var(--brass-deep); }
  .cal-edge{ background:var(--brass);color:#fff;font-weight:600; }
  .cal-disabled{ color:var(--ink-faint);opacity:0.4;cursor:not-allowed; }
  .cal-foot{
    margin-top:9px;padding-top:8px;border-top:1px solid var(--line-soft);
    font-size:10.5px;color:var(--ink-faint);text-align:center;
  }
  .content{padding:24px 28px 60px 28px;flex:1;}

  /* ---------- section headers ---------- */
  .section-title{
    display:flex;align-items:baseline;gap:10px;
    margin:32px 0 14px 0;
  }
  .section-title:first-child{margin-top:0;}
  .section-title h2{font-size:14.5px;font-weight:600;margin:0;letter-spacing:0.01em;}
  .section-title .rule{flex:1;height:1px;background:repeating-linear-gradient(90deg,var(--line) 0,var(--line) 4px,transparent 4px,transparent 8px);}
  .section-title .tag{font-family:'IBM Plex Mono';font-size:10.5px;color:var(--brass-deep);background:var(--brass-bg);padding:2px 7px;border-radius:4px;}

  /* ---------- KPI ledger cards ---------- */
  .kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;}
  .kpi-card{
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:16px 16px 14px 16px;
    position:relative;
    box-shadow:var(--shadow);
    overflow:hidden;
  }
  .kpi-card::before{
    content:"";position:absolute;top:0;left:0;right:0;height:3px;
    background:repeating-linear-gradient(90deg, var(--brass) 0, var(--brass) 5px, transparent 5px, transparent 10px);
    opacity:0.55;
  }
  .kpi-card .code{
    position:absolute;top:10px;right:12px;
    font-family:'IBM Plex Mono';font-size:9.5px;color:var(--ink-faint);
    letter-spacing:0.03em;
  }
  .kpi-card .label{font-size:11.5px;color:var(--ink-soft);font-weight:500;margin-bottom:8px;padding-right:30px;}
  .kpi-card .value{font-family:'IBM Plex Mono';font-size:22px;font-weight:600;letter-spacing:-0.01em;line-height:1.15;}
  .kpi-card .value.pos{color:var(--positive);}
  .kpi-card .value.neg{color:var(--negative);}
  .kpi-card .footnote{font-size:11px;color:var(--ink-faint);margin-top:6px;}

  /* ---------- panel / card grid ---------- */
  .panel{
    background:var(--panel);border:1px solid var(--line);
    border-radius:var(--radius);padding:18px 18px 14px 18px;
    box-shadow:var(--shadow);
  }
  .panel h3{font-size:13px;font-weight:600;margin:0 0 3px 0;}
  .panel .panel-sub{font-size:11.5px;color:var(--ink-soft);margin-bottom:14px;}
  .grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
  .grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;}
  @media(max-width:1100px){.grid2,.grid3{grid-template-columns:1fr;}}
  .chart-wrap{position:relative;}

  /* ---------- tables ---------- */
  table{width:100%;border-collapse:collapse;font-size:12.8px;}
  thead th{
    text-align:left;font-weight:600;color:var(--ink-soft);
    font-size:11px;text-transform:uppercase;letter-spacing:0.04em;
    padding:8px 10px;border-bottom:1px solid var(--line);
    background:var(--panel-alt);
    position:sticky;top:0;
  }
  tbody td{padding:8px 10px;border-bottom:1px solid var(--line-soft);vertical-align:middle;}
  tbody tr:hover{background:var(--panel-alt);}
  td.num,th.num{text-align:right;font-family:'IBM Plex Mono';font-variant-numeric:tabular-nums;}
  td.code{font-family:'IBM Plex Mono';font-size:11.2px;color:var(--ink-faint);}
  .table-scroll{max-height:420px;overflow-y:auto;border-radius:8px;border:1px solid var(--line-soft);}
  .row-pos{color:var(--positive);font-weight:600;}
  .row-neg{color:var(--negative);font-weight:600;}
  /* Panele yansımayan (daha yeni bir kümülatif tarafından kapsanan) mizan satırı */
  .row-muted td{opacity:0.55;}

  /* ---------- badges ---------- */
  .badge{
    display:inline-flex;align-items:center;gap:5px;
    font-size:11px;font-weight:600;padding:3px 9px;border-radius:20px;
  }
  .badge.pos{background:var(--positive-bg);color:var(--positive);}
  .badge.neg{background:var(--negative-bg);color:var(--negative);}
  .badge.warn{background:var(--warning-bg);color:var(--warning);}
  .badge.neutral{background:var(--panel-alt);color:var(--ink-soft);border:1px solid var(--line);}

  /* ---------- company selector pills (detail page) ---------- */
  .company-pills{display:flex;gap:8px;flex-wrap:wrap;}
  .company-pill{
    padding:10px 16px;border-radius:10px;border:1px solid var(--line);
    background:var(--panel);cursor:pointer;min-width:150px;
    transition:all .12s ease;
  }
  .company-pill:hover{border-color:var(--brass);}
  .company-pill.active{background:var(--navy);border-color:var(--navy);}
  .company-pill .cp-name{font-weight:600;font-size:13px;}
  .company-pill.active .cp-name{color:#F3F5F9;}
  .company-pill .cp-result{font-family:'IBM Plex Mono';font-size:12px;margin-top:3px;}
  .company-pill.active .cp-result{color:#D8DEEA;}

  /* ---------- misc ---------- */
  .bar-track{background:var(--line-soft);border-radius:20px;height:7px;overflow:hidden;}
  .bar-fill{height:100%;border-radius:20px;}
  .flex{display:flex;}
  .between{justify-content:space-between;}
  .items-center{align-items:center;}
  .gap8{gap:8px;}
  .small{font-size:11.5px;color:var(--ink-soft);}
  .mt10{margin-top:10px;}
  .mt14{margin-top:14px;}

  /* ---------- şirket değerlendirme notları ---------- */
  .notes-card{
    background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
    padding:16px 18px;box-shadow:var(--shadow);position:relative;overflow:hidden;
  }
  .notes-card::before{
    content:"";position:absolute;top:0;left:0;bottom:0;width:3px;
    background:repeating-linear-gradient(180deg, var(--brass) 0, var(--brass) 5px, transparent 5px, transparent 10px);
    opacity:0.55;
  }
  .notes-card .nc-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
  .notes-card .nc-head .cname{font-weight:600;font-size:14px;}

  input[type=text],input[type=month],select{
    font-family:'IBM Plex Sans';font-size:12.6px;
    padding:8px 12px;border-radius:8px;border:1px solid var(--line);
    background:var(--panel);color:var(--ink);
  }
  input[type=text]:focus,input[type=month]:focus,select:focus{outline:2px solid var(--brass-bg);border-color:var(--brass);}

  .legend-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:10px;}
  .legend-item{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink-soft);}
  .legend-item .sq{width:10px;height:10px;border-radius:2px;}

  ::-webkit-scrollbar{width:9px;height:9px;}
  ::-webkit-scrollbar-track{background:transparent;}
  ::-webkit-scrollbar-thumb{background:#C6CCD8;border-radius:20px;}

  /* ---------------------------- LOGIN SCREEN ---------------------------- */
  #loginScreen{
    display:none; /* toggled via JS */
    min-height:100vh; width:100%;
    align-items:center; justify-content:center;
    background:
      radial-gradient(1200px 600px at 15% 10%, rgba(173,123,50,0.10), transparent 60%),
      radial-gradient(1000px 700px at 85% 90%, rgba(46,110,142,0.10), transparent 60%),
      linear-gradient(180deg,var(--navy) 0%, #0D1728 100%);
    position:fixed; inset:0; z-index:100;
  }
  .login-card{
    width:380px; max-width:92vw;
    background:var(--panel); border-radius:14px;
    padding:32px 30px 28px 30px;
    box-shadow:0 30px 80px -20px rgba(0,0,0,0.5);
    position:relative; overflow:hidden;
  }
  .login-card::before{
    content:"";position:absolute;top:0;left:0;right:0;height:4px;
    background:repeating-linear-gradient(90deg, var(--brass) 0, var(--brass) 6px, transparent 6px, transparent 12px);
  }
  .login-brand{display:flex;align-items:center;gap:11px;margin-bottom:22px;}
  .login-brand .mark-badge{width:38px;height:38px;border-radius:9px;background:linear-gradient(135deg,var(--brass) 0%, #7A5620 100%);display:flex;align-items:center;justify-content:center;font-family:'IBM Plex Mono';font-weight:700;font-size:14px;color:#FFF8EC;flex:0 0 38px;}
  .login-brand .title{font-size:16px;font-weight:600;color:var(--ink);line-height:1.2;}
  .login-brand .sub{font-size:11px;color:var(--ink-soft);font-family:'IBM Plex Mono';margin-top:2px;}
  .login-field{margin-bottom:14px;}
  .login-field label{display:block;font-size:11.5px;font-weight:600;color:var(--ink-soft);margin-bottom:6px;}
  .login-field input{width:100%;padding:10px 12px;border-radius:8px;border:1px solid var(--line);font-family:'IBM Plex Sans';font-size:13.5px;background:var(--panel-alt);}
  .login-field input:focus{outline:none;border-color:var(--brass);background:var(--panel);}
  .login-btn{
    width:100%;padding:11px 12px;border-radius:8px;border:none;
    background:var(--navy);color:#F3F5F9;font-size:13.5px;font-weight:600;
    cursor:pointer;margin-top:6px;transition:background .12s ease;
    font-family:'IBM Plex Sans';
  }
  .login-btn:hover{background:var(--navy-softer);}
  .login-error{
    display:none;margin-top:12px;padding:9px 11px;border-radius:8px;
    background:var(--negative-bg);color:var(--negative);font-size:12px;font-weight:500;
    border:1px solid var(--negative-line);
  }
  .login-footer-note{margin-top:16px;font-size:10.5px;color:var(--ink-faint);line-height:1.5;text-align:center;}

  /* ---------------------------- USER MENU (topbar) ---------------------------- */
  .user-menu{display:flex;align-items:center;gap:10px;padding-left:14px;margin-left:4px;border-left:1px solid var(--line);}
  .user-avatar{
    width:32px;height:32px;border-radius:50%;background:var(--navy);color:#F3F5F9;
    display:flex;align-items:center;justify-content:center;font-family:'IBM Plex Mono';
    font-weight:600;font-size:12px;flex:0 0 32px;
  }
  .user-info{line-height:1.3;}
  .user-info .u-name{font-size:12.5px;font-weight:600;color:var(--ink);}
  .user-info .u-role{font-size:10.5px;color:var(--ink-soft);}
  .logout-btn{
    background:var(--panel-alt);border:1px solid var(--line);color:var(--ink-soft);
    font-size:11.5px;font-weight:500;padding:6px 11px;border-radius:7px;cursor:pointer;
    font-family:'IBM Plex Sans'; margin-left:2px;
  }
  .logout-btn:hover{border-color:var(--negative);color:var(--negative);}

  /* ---------------------------- ADMIN / USER MANAGEMENT ---------------------------- */
  .user-table-actions{display:flex;gap:6px;}
  .icon-btn{
    background:var(--panel-alt);border:1px solid var(--line);border-radius:6px;
    padding:5px 9px;font-size:11px;cursor:pointer;color:var(--ink-soft);font-family:'IBM Plex Sans';
  }
  .icon-btn:hover{border-color:var(--brass);color:var(--ink);}
  .icon-btn.danger:hover{border-color:var(--negative);color:var(--negative);}
  .perm-chip{
    display:inline-flex;align-items:center;font-size:10.5px;font-weight:500;
    padding:2px 8px;border-radius:20px;background:var(--panel-alt);border:1px solid var(--line);
    margin:2px 3px 2px 0;color:var(--ink-soft);
  }
  .role-chip{font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:20px;text-transform:uppercase;letter-spacing:0.03em;}
  .role-chip.admin{background:var(--brass-bg);color:var(--brass-deep);}
  .role-chip.user{background:var(--panel-alt);color:var(--ink-soft);border:1px solid var(--line);}

  .modal-overlay{
    position:fixed;inset:0;background:rgba(10,18,32,0.55);z-index:200;
    display:flex;align-items:center;justify-content:center;padding:20px;
  }
  .modal-card{
    background:var(--panel);border-radius:14px;padding:26px 26px 22px 26px;
    width:460px;max-width:100%;max-height:88vh;overflow-y:auto;
    box-shadow:0 30px 80px -20px rgba(0,0,0,0.5);
  }
  .modal-card h3{margin:0 0 4px 0;font-size:16px;}
  .modal-card .modal-sub{font-size:12px;color:var(--ink-soft);margin-bottom:18px;}
  .form-field{margin-bottom:14px;}
  .form-field label{display:block;font-size:11.5px;font-weight:600;color:var(--ink-soft);margin-bottom:6px;}
  .form-field input[type=text],.form-field input[type=password],.form-field input[type=month],.form-field select{
    width:100%;padding:9px 11px;border-radius:8px;border:1px solid var(--line);font-size:13px;background:var(--panel-alt);
  }
  /* Dosya seçici: tarayıcının kendi düğmesi kalıyor, yalnızca çerçevesi
     diğer alanlara benzetiliyor. */
  .form-field input[type=file]{
    width:100%;padding:7px 9px;border-radius:8px;border:1px dashed var(--line);
    font-family:'IBM Plex Sans';font-size:12.5px;background:var(--panel-alt);color:var(--ink-soft);
  }
  .form-field input[type=file]::file-selector-button{
    font-family:'IBM Plex Sans';font-size:12px;margin-right:10px;cursor:pointer;
    padding:6px 12px;border-radius:6px;border:1px solid var(--line);
    background:var(--panel);color:var(--ink);
  }
  .form-field .field-note{font-size:10.5px;color:var(--ink-faint);margin-top:4px;}
  .checkbox-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:4px;}
  .checkbox-row{display:flex;align-items:center;gap:7px;font-size:12.5px;padding:7px 9px;border:1px solid var(--line);border-radius:7px;background:var(--panel-alt);}
  .checkbox-row input{width:14px;height:14px;}
  .modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:20px;}
  .btn{
    padding:9px 16px;border-radius:8px;border:1px solid var(--line);background:var(--panel);
    font-size:12.8px;font-weight:600;cursor:pointer;font-family:'IBM Plex Sans';color:var(--ink);
  }
  .btn:hover{border-color:var(--brass);}
  .btn.primary{background:var(--navy);color:#F3F5F9;border-color:var(--navy);}
  .btn.primary:hover{background:var(--navy-softer);}
  .btn.danger{background:var(--negative);color:#fff;border-color:var(--negative);}