/* ============================================================
   TRADE MAGNET — Desktop Design System  (eToro-Sync Edition)
   Palette: White Content Area + Dark Sidebar + eToro Green
   Shared tokens prefixed --et-* for cross-platform sync
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* ── Shared Design Tokens ── */
:root {
    /* Backgrounds */
    --et-bg-body:       #F5F7FA;
    --et-bg-surface:    #FFFFFF;
    --et-bg-surface-2:  #F0F2F5;
    --et-bg-input:      #F5F7FA;
    --et-bg-hover:      #F0FFF4;   /* Very light green hover tint */

    /* Sidebar — stays dark for desktop usability (eToro hybrid) */
    --et-bg-sidebar:    #1A1A2E;
    --et-sidebar-width: 220px;

    /* Topbar */
    --et-bg-topbar:     #FFFFFF;
    --et-topbar-height: 56px;

    /* eToro Brand Green */
    --et-green-primary: #13C636;
    --et-green-dark:    #0FA82C;
    --et-green-dim:     rgba(19, 198, 54, 0.10);
    --et-green-badge:   rgba(19, 198, 54, 0.12);

    /* Semantic Trading Colors */
    --et-up:    #13C636;
    --et-down:  #F6465D;
    --et-up-dim:   rgba(19, 198, 54, 0.10);
    --et-down-dim: rgba(246, 70, 93, 0.10);

    /* Text — light area */
    --et-text-primary:   #1A1A2E;
    --et-text-secondary: #6B7280;
    --et-text-muted:     #9CA3AF;
    --et-text-on-green:  #FFFFFF;

    /* Text — dark sidebar */
    --et-sidebar-text:        #EAECEF;
    --et-sidebar-text-muted:  #6B7280;
    --et-sidebar-border:      rgba(255,255,255,0.07);
    --et-sidebar-hover:       rgba(255,255,255,0.07);
    --et-sidebar-active-bg:   rgba(19,198,54,0.12);
    --et-sidebar-active-text: #13C636;

    /* Borders */
    --et-border:       #E5E7EB;
    --et-border-focus: #13C636;

    /* Elevation */
    --et-shadow-card:  0 1px 4px rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.04);
    --et-shadow-hover: 0 4px 16px rgba(0,0,0,0.10);

    /* Shape */
    --et-radius:    8px;
    --et-radius-sm: 4px;
    --et-radius-lg: 12px;

    /* Typography */
    --et-font:      'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --et-font-mono: 'Inter', 'Roboto Mono', monospace;

    /* Transitions */
    --et-transition: 140ms ease;

    /* ── Legacy --kl-* aliases (keeps templates working) ── */
    --kl-bg-body:        var(--et-bg-body);
    --kl-bg-surface:     var(--et-bg-surface);
    --kl-bg-surface-2:   var(--et-bg-surface-2);
    --kl-bg-input:       var(--et-bg-input);
    --kl-bg-hover:       var(--et-bg-hover);
    --kl-sidebar-bg:     var(--et-bg-sidebar);
    --kl-sidebar-width:  var(--et-sidebar-width);
    --kl-topbar-bg:      var(--et-bg-topbar);
    --kl-topbar-height:  var(--et-topbar-height);
    --kl-gold:           var(--et-green-primary);  /* remapped: gold → green */
    --kl-gold-dim:       var(--et-green-dim);
    --kl-green:          var(--et-up);
    --kl-red:            var(--et-down);
    --kl-blue:           #3d86f0;
    --kl-text-primary:   var(--et-text-primary);
    --kl-text-secondary: var(--et-text-secondary);
    --kl-text-muted:     var(--et-text-muted);
    --kl-text-gold:      var(--et-green-primary);
    --kl-border:         var(--et-border);
    --kl-border-active:  var(--et-border-focus);
    --kl-font:           var(--et-font);
    --kl-font-mono:      var(--et-font-mono);
    --kl-radius:         var(--et-radius);
    --kl-radius-sm:      var(--et-radius-sm);
    --kl-transition:     var(--et-transition);
}

/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 14px; }

body {
    font-family: var(--et-font);
    background:  var(--et-bg-body);
    color:       var(--et-text-primary);
    min-height:  100vh;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a, a:hover, a:visited, a:active {
    text-decoration: none;
    transition: color var(--et-transition), background var(--et-transition);
}
a {
    color: inherit;
}

input, select, textarea, button {
    font-family: var(--et-font);
    font-size:   14px;
}

::-webkit-scrollbar          { width: 5px; height: 5px; }
::-webkit-scrollbar-track    { background: var(--et-bg-body); }
::-webkit-scrollbar-thumb    { background: #D1D5DB; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #9CA3AF; }

/* ── App Shell Layout ── */
.kl-app {
    display:   grid;
    grid-template-columns: var(--et-sidebar-width) 1fr;
    grid-template-rows:    var(--et-topbar-height) 1fr;
    grid-template-areas:
        "sidebar topbar"
        "sidebar main";
    min-height: 100vh;
}

/* ════════════════════════════════════════
   SIDEBAR — Dark rail (eToro hybrid)
   ════════════════════════════════════════ */
.kl-sidebar {
    grid-area:    sidebar;
    grid-row:     1 / -1;
    background:   var(--et-bg-sidebar);
    border-right: 1px solid rgba(255,255,255,0.05);
    display:      flex;
    flex-direction: column;
    position:     sticky;
    top:          0;
    height:       100vh;
    overflow-y:   auto;
    z-index:      100;
}

.kl-sidebar__brand {
    padding:    18px 14px 14px;
    border-bottom: 1px solid var(--et-sidebar-border);
    flex-shrink: 0;
}

.kl-sidebar__logo {
    display:     flex;
    align-items: center;
    gap:         8px;
    font-weight: 700;
    font-size:   15px;
    letter-spacing: 0.3px;
    white-space: nowrap;
    overflow:    hidden;
}

.kl-sidebar__logo-text {
    color: var(--et-sidebar-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kl-sidebar__nav {
    flex: 1;
    padding: 10px 0;
    overflow-y: auto;
}

.kl-sidebar__section-label {
    font-size:   10px;
    font-weight: 600;
    letter-spacing: 1.2px;
    color:       var(--et-sidebar-text-muted);
    padding:     14px 16px 5px;
    text-transform: uppercase;
}

.kl-sidebar__item {
    display:     flex;
    align-items: center;
    gap:         10px;
    padding:     10px 16px;
    font-size:   13px;
    font-weight: 500;
    color:       var(--et-sidebar-text);  /* #EAECEF — readable on dark sidebar */
    cursor:      pointer;
    border-left: 3px solid transparent;
    transition:  background var(--et-transition), color var(--et-transition), border-color var(--et-transition);
    border-radius: 0 6px 6px 0;
    margin: 1px 8px 1px 0;
}

.kl-sidebar__item:hover {
    background: var(--et-sidebar-hover);
    color:      var(--et-sidebar-text);
}

.kl-sidebar__item--active {
    background:   var(--et-sidebar-active-bg);
    color:        var(--et-sidebar-active-text);
    border-left-color: var(--et-green-primary);
    font-weight:  600;
}

.kl-sidebar__icon {
    font-size: 16px;
    flex-shrink: 0;
    width:     18px;
    text-align: center;
}

.kl-sidebar__label { white-space: nowrap; }

.kl-sidebar__divider {
    height:  1px;
    background: var(--et-sidebar-border);
    margin: 10px 0;
}

.kl-sidebar__footer {
    padding:      10px 12px;
    border-top:   1px solid var(--et-sidebar-border);
    display:      flex;
    align-items:  center;
    gap:          6px;
    flex-shrink:  0;
}

.kl-sidebar__user-btn,
.kl-sidebar__login-btn {
    flex:         1;
    display:      flex;
    align-items:  center;
    gap:          7px;
    font-size:    12px;
    font-weight:  600;
    padding:      8px 10px;
    background:   rgba(255,255,255,0.06);
    color:        var(--et-sidebar-text);
    border:       1px solid var(--et-sidebar-border);
    border-radius: var(--et-radius-sm);
    cursor:       pointer;
    transition:   background var(--et-transition);
}
.kl-sidebar__user-btn:hover,
.kl-sidebar__login-btn:hover { background: rgba(255,255,255,0.10); }

.kl-sidebar__logout-btn {
    display:     flex;
    align-items: center;
    justify-content: center;
    width:       34px;
    height:      34px;
    background:  rgba(255,255,255,0.06);
    border:      1px solid var(--et-sidebar-border);
    border-radius: var(--et-radius-sm);
    color:       var(--et-sidebar-text-muted);
    font-size:   16px;
    cursor:      pointer;
    transition:  background var(--et-transition), color var(--et-transition);
}
.kl-sidebar__logout-btn:hover { background: rgba(246,70,93,0.15); color: var(--et-down); }

/* ════════════════════════════════════════
   TOPBAR — White header bar
   ════════════════════════════════════════ */
.kl-topbar {
    grid-area:    topbar;
    background:   var(--et-bg-topbar);
    border-bottom: 1px solid var(--et-border);
    box-shadow:   0 1px 4px rgba(0,0,0,0.05);
    display:      flex;
    align-items:  center;
    gap:          16px;
    padding:      0 20px;
    height:       var(--et-topbar-height);
    position:     sticky;
    top:          0;
    z-index:      90;
}

.kl-topbar__title {
    font-size:   13px;
    font-weight: 600;
    color:       var(--et-text-primary);
    white-space: nowrap;
    min-width:   100px;
}

.kl-topbar__ticker {
    display:     flex;
    align-items: center;
    gap:         6px;
    font-size:   12px;
    font-variant-numeric: tabular-nums;
}
.kl-topbar__ticker-label {
    font-size:   10px;
    font-weight: 600;
    letter-spacing: 0.8px;
    color:       var(--et-text-muted);
    text-transform: uppercase;
}
.kl-topbar__ticker-price  { font-weight: 700; color: var(--et-up); }
.kl-topbar__ticker-change { font-size: 11px; color: var(--et-up); }

.kl-topbar__controls {
    margin-left: auto;
    display:     flex;
    align-items: center;
    gap:         4px;
}

.kl-topbar__icon-btn {
    position:    relative;
    display:     flex;
    align-items: center;
    justify-content: center;
    width:       36px;
    height:      36px;
    font-size:   17px;
    color:       var(--et-text-secondary);
    border:      1px solid transparent;
    border-radius: var(--et-radius-sm);
    cursor:      pointer;
    transition:  background var(--et-transition), color var(--et-transition);
}
.kl-topbar__icon-btn:hover {
    background: var(--et-bg-surface-2);
    color:      var(--et-text-primary);
    border-color: var(--et-border);
}

.kl-topbar__badge {
    position:    absolute;
    top:         4px;
    right:       4px;
    background:  var(--et-green-primary);
    color:       var(--et-text-on-green);
    font-size:   9px;
    font-weight: 700;
    min-width:   14px;
    height:      14px;
    border-radius: 7px;
    display:     flex;
    align-items: center;
    justify-content: center;
    padding:     0 3px;
}

.kl-topbar__user-btn {
    display:     flex;
    align-items: center;
    font-size:   20px;
    color:       var(--et-text-secondary);
    padding:     0 6px;
    height:      36px;
    cursor:      pointer;
    transition:  color var(--et-transition);
}
.kl-topbar__user-btn:hover { color: var(--et-green-primary); }

.kl-topbar__login-link {
    display:     flex;
    align-items: center;
    height:      32px;
    padding:     0 14px;
    font-size:   12px;
    font-weight: 600;
    color:       var(--et-text-on-green);
    background:  var(--et-green-primary);
    border-radius: var(--et-radius-sm);
    cursor:      pointer;
    transition:  background var(--et-transition);
}
.kl-topbar__login-link:hover { background: var(--et-green-dark); }

/* ── Main Content Area ── */
.kl-main {
    grid-area: main;
    background: var(--et-bg-body);
    overflow-y: auto;
    overflow-x: hidden;
}

/* ════════════════════════════════════════
   UTILITY COMPONENTS
   ════════════════════════════════════════ */

/* Card */
.kl-card {
    background: var(--et-bg-surface);
    border:     1px solid var(--et-border);
    border-radius: var(--et-radius);
    padding:    14px 18px;
    box-shadow: var(--et-shadow-card);
    transition: box-shadow var(--et-transition);
}

.kl-card:hover { box-shadow: var(--et-shadow-hover); }

.kl-card--elevated {
    background: var(--et-bg-surface);
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}

/* Section Header */
.kl-section-header {
    display:    flex;
    align-items: baseline;
    gap:        8px;
    padding:    12px 18px 10px;
    border-bottom: 1px solid var(--et-border);
}
.kl-section-title {
    font-size:  12px;
    font-weight: 600;
    color:      var(--et-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
.kl-section-sub {
    font-size:  11px;
    color:      var(--et-text-muted);
}

/* Data Table */
.kl-table {
    width:       100%;
    border-collapse: collapse;
    font-size:   13px;
    font-variant-numeric: tabular-nums;
}
.kl-table th {
    padding:         9px 14px;
    font-size:       11px;
    font-weight:     600;
    letter-spacing:  0.6px;
    text-transform:  uppercase;
    color:           var(--et-text-muted);
    background:      var(--et-bg-surface-2);
    border-bottom:   1px solid var(--et-border);
    text-align:      right;
    white-space:     nowrap;
}
.kl-table th:first-child { text-align: left; }
.kl-table td {
    padding:      10px 14px;
    border-bottom: 1px solid var(--et-border);
    text-align:   right;
    color:        var(--et-text-primary);
    white-space:  nowrap;
}
.kl-table td:first-child { text-align: left; }
.kl-table tr:hover td    { background: var(--et-bg-hover); }
.kl-table .num           { font-family: var(--et-font-mono); }

/* Price Colors */
.kl-up   { color: var(--et-up)   !important; }
.kl-down { color: var(--et-down) !important; }
.kl-gold { color: var(--et-green-primary) !important; }

/* Badge / Pill */
.kl-badge {
    display:     inline-flex;
    align-items: center;
    padding:     3px 7px;
    font-size:   11px;
    font-weight: 600;
    border-radius: var(--et-radius-sm);
}
.kl-badge--up   { background: var(--et-up-dim);   color: var(--et-up);   }
.kl-badge--down { background: var(--et-down-dim); color: var(--et-down); }
.kl-badge--gold { background: var(--et-green-dim); color: var(--et-green-primary); }

/* Buttons */
.kl-btn {
    display:     inline-flex;
    align-items: center;
    justify-content: center;
    gap:         6px;
    padding:     9px 18px;
    font-size:   13px;
    font-weight: 600;
    cursor:      pointer;
    border:      1px solid transparent;
    border-radius: var(--et-radius);
    transition:  background var(--et-transition), box-shadow var(--et-transition), transform var(--et-transition);
    white-space: nowrap;
}
.kl-btn--primary { background: var(--et-green-primary); color: var(--et-text-on-green); }
.kl-btn--primary:hover {
    background: var(--et-green-dark);
    box-shadow: 0 4px 12px rgba(19,198,54,0.25);
}
.kl-btn--success { background: var(--et-up);   color: #fff; }
.kl-btn--success:hover { background: #0FA82C; }
.kl-btn--danger  { background: var(--et-down); color: #fff; }
.kl-btn--danger:hover  { background: #D93550; }
.kl-btn--ghost   { background: var(--et-bg-surface); color: var(--et-text-primary); border-color: var(--et-border); }
.kl-btn--ghost:hover   { background: var(--et-bg-surface-2); border-color: #D1D5DB; }
.kl-btn--sm      { padding: 5px 12px; font-size: 11px; }
.kl-btn--full    { width: 100%; }
.kl-btn:active   { transform: scale(0.98); }

/* Form Inputs */
.kl-input {
    width:        100%;
    background:   var(--et-bg-input);
    color:        var(--et-text-primary);
    border:       1px solid var(--et-border);
    padding:      9px 12px;
    font-size:    13px;
    border-radius: var(--et-radius-sm);
    outline:      none;
    transition:   border-color var(--et-transition), box-shadow var(--et-transition);
}
.kl-input:focus {
    border-color: var(--et-border-focus);
    box-shadow:   0 0 0 3px var(--et-green-dim);
    background:   var(--et-bg-surface);
}
.kl-input::placeholder { color: var(--et-text-muted); }

.kl-label {
    display:    block;
    font-size:  11px;
    font-weight: 600;
    color:      var(--et-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 5px;
}

.kl-form-group { margin-bottom: 14px; }

/* Tab Row */
.kl-tabs {
    display:     flex;
    align-items: stretch;
    border-bottom: 1px solid var(--et-border);
    background: var(--et-bg-surface);
}
.kl-tab {
    padding:     10px 18px;
    font-size:   13px;
    font-weight: 500;
    color:       var(--et-text-secondary);
    cursor:      pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
    transition:  color var(--et-transition), border-color var(--et-transition);
}
.kl-tab:hover   { color: var(--et-text-primary); }
.kl-tab--active { color: var(--et-green-primary); border-bottom-color: var(--et-green-primary); font-weight: 600; }

/* Stat Cell */
.kl-stat {
    padding:     12px 18px;
    border-right: 1px solid var(--et-border);
    background: var(--et-bg-surface);
}
.kl-stat:last-child { border-right: none; }
.kl-stat__label {
    font-size:   11px;
    color:       var(--et-text-muted);
    margin-bottom: 3px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.kl-stat__value {
    font-size:   16px;
    font-weight: 700;
    color:       var(--et-text-primary);
    font-variant-numeric: tabular-nums;
}

/* Alert / Toast */
.kl-alert {
    padding:    11px 16px;
    font-size:  13px;
    border-radius: var(--et-radius-sm);
    border-left: 3px solid;
    margin-bottom: 10px;
}
.kl-alert--info    { background: #EBF5FF; border-color: #3d86f0;           color: #1d4ed8; }
.kl-alert--success { background: var(--et-green-dim);   border-color: var(--et-up);   color: #0FA82C; }
.kl-alert--danger  { background: var(--et-down-dim);    border-color: var(--et-down); color: #D93550; }
.kl-alert--gold    { background: var(--et-green-dim);   border-color: var(--et-green-primary); color: var(--et-green-primary); }

/* Pagination */
.kl-pagination {
    display:     flex;
    align-items: center;
    gap:         4px;
    padding:     14px 18px;
    background: var(--et-bg-surface);
    border-top: 1px solid var(--et-border);
}
.kl-pagination a,
.kl-pagination span {
    display:     flex;
    align-items: center;
    justify-content: center;
    min-width:   30px;
    height:      30px;
    font-size:   12px;
    font-weight: 600;
    color:       var(--et-text-secondary);
    border:      1px solid var(--et-border);
    border-radius: var(--et-radius-sm);
    padding:     0 6px;
    cursor:      pointer;
    background:  var(--et-bg-surface);
    transition:  background var(--et-transition);
}
.kl-pagination a:hover { background: var(--et-bg-surface-2); color: var(--et-text-primary); }
.kl-pagination .current { background: var(--et-green-primary); color: #fff; border-color: var(--et-green-primary); }

/* ── Responsive: collapse sidebar on small screens ── */
@media (max-width: 960px) {
    :root { --et-sidebar-width: 0px; }
    .kl-sidebar { display: none; }
    .kl-app {
        grid-template-columns: 1fr;
        grid-template-areas:
            "topbar"
            "main";
    }
}