/* Qefro Voice Studio — Dashboard Styles */

/* ===== Dashboard Navigation ===== */
.dash-nav{display:flex;gap:6px}
.dash-nav-link{font-size:13px;color:#a4afc8;padding:8px 14px;border-radius:9px;transition:color .2s,background .2s}
.dash-nav-link:hover{color:white;background:rgba(255,255,255,.06)}
.dash-nav-link.active{color:#d6ccff;background:#39375f;font-weight:700}

/* Mobile tab bar */
.mobile-tab-bar{display:none;position:fixed;bottom:0;left:0;right:0;z-index:30;background:rgba(8,14,32,.95);backdrop-filter:blur(20px);border-top:1px solid rgba(128,146,202,.15);padding:6px 8px calc(6px + env(safe-area-inset-bottom));justify-content:space-around}
.mobile-tab{display:flex;flex-direction:column;align-items:center;gap:3px;background:none;border:0;color:#8696b2;font-size:10px;padding:6px 12px;border-radius:8px;transition:color .2s}
.mobile-tab.active{color:#d6ccff}
.mobile-tab-icon{font-size:18px;display:block}

/* ===== Main Layout ===== */
.dash-main{padding-top:30px;padding-bottom:100px;min-height:calc(100vh - 160px)}
.dash-tab-content{display:none}
.dash-tab-content.active{display:block}

/* ===== Welcome / Page Header ===== */
.dash-welcome{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:30px;flex-wrap:wrap}
.dash-welcome h1, .dash-welcome-title{font-family:Manrope,sans-serif;font-size:clamp(28px,3.2vw,40px);line-height:1.2;letter-spacing:-1.4px;margin:8px 0 6px;font-weight:800}
.dash-subtitle{color:#9aa6be;font-size:14px;margin:0}
.plan-badge-wrap{display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.plan-badge{display:inline-block;background:linear-gradient(110deg,#665eff,#8d6af7 55%,#ad70ed);color:white;font-weight:800;font-size:11px;letter-spacing:1px;padding:8px 16px;border-radius:20px;text-transform:uppercase}
.plan-badge.free{background:linear-gradient(110deg,#3a4565,#4a5577)}
.plan-badge.api{background:linear-gradient(110deg,#665eff,#8d6af7 55%,#ad70ed)}
.plan-badge.api_plus{background:linear-gradient(110deg,#e97aff,#8d6af7)}
.plan-expiry{font-size:11px;color:#8da1b6}

/* ===== Stat Cards ===== */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}
.stat-card{background:#141e31;border:1px solid #303b53;border-radius:16px;padding:22px 20px;text-align:center;transition:border-color .2s,transform .2s}
.stat-card:hover{border-color:#675e9d;transform:translateY(-2px)}
.stat-label{display:block;font-size:11px;color:#8da1b6;font-weight:700;letter-spacing:.8px;text-transform:uppercase;margin-bottom:10px}
.stat-value{display:block;font-family:Manrope,sans-serif;font-size:clamp(24px,2.5vw,34px);font-weight:800;letter-spacing:-1px;background:linear-gradient(100deg,#a88aff 10%,#78b7ff 55%,#59e2e1 97%);color:transparent;background-clip:text}
.stat-sub{display:block;font-size:11px;color:#7f91ad;margin-top:4px}

/* ===== Dashboard Cards ===== */
.dash-row{display:grid;grid-template-columns:2fr 1fr;gap:16px;margin-bottom:16px}
.dash-card{background:#141e31;border:1px solid #303b53;border-radius:16px;padding:24px;margin-bottom:16px}
.card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.card-header h3{font-size:16px;font-weight:700;margin:0}
.flex-1{flex:1}.flex-2{flex:2}

/* ===== Usage Chart ===== */
.usage-chart{min-height:180px;display:flex;flex-direction:column;justify-content:flex-end}
.usage-chart-wide{min-height:220px}
.chart-placeholder{text-align:center;color:#8696b2;font-size:12px;padding:40px}
.chart-bars{display:flex;align-items:flex-end;gap:8px;height:150px;padding:10px 0}
.chart-bars-wide{height:190px;gap:4px}
.chart-bar-wrap{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.chart-bar{width:100%;max-width:40px;border-radius:6px 6px 2px 2px;background:linear-gradient(to top,#665eff,#59e2e1);transition:height .4s ease;min-height:2px;position:relative}
.chart-bar:hover{opacity:.85}
.chart-bar-label{font-size:9px;color:#8696b2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.chart-bar-value{font-size:9px;color:#c9d4ee;font-weight:700;white-space:nowrap}
.chart-legend{display:flex;gap:16px;margin-top:12px;font-size:10px;color:#8da1b6}
.chart-legend span::before{content:"";display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:5px;vertical-align:middle}
.chart-legend .legend-chars::before{background:linear-gradient(to top,#665eff,#59e2e1)}
.chart-legend .legend-reqs::before{background:#f6c082}

/* ===== Quick Actions ===== */
.quick-actions{display:flex;flex-direction:column;gap:8px}
.quick-action-btn{display:flex;align-items:center;gap:10px;padding:14px 16px;background:#19263c;border:1px solid #354058;border-radius:12px;color:#d5def3;font-size:13px;font-weight:600;text-decoration:none;transition:background .15s,border .15s}
.quick-action-btn:hover{background:#263451;border-color:#7773bb;color:white}
.quick-action-btn span{font-size:18px;width:24px;text-align:center}

/* ===== Recent List ===== */
.recent-list{display:grid;gap:8px}
.recent-item{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 16px;background:#19263c;border:1px solid #354058;border-radius:12px;transition:border-color .15s}
.recent-item:hover{border-color:#675e9d}
.recent-item-info{min-width:0;flex:1}
.recent-item-info strong{font-size:13px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.recent-item-info small{font-size:11px;color:#8696b2;display:block;margin-top:3px}
.recent-item-meta{display:flex;align-items:center;gap:10px;flex-shrink:0}
.status-dot{display:inline-block;width:8px;height:8px;border-radius:50%}
.status-dot.succeeded{background:#50dcad}
.status-dot.failed{background:#ff6b8a}
.status-dot.running{background:#f6c082}
.recent-item-chars{font-size:12px;color:#a4afc8;font-variant-numeric:tabular-nums}

/* ===== API Keys ===== */
.api-key-create-section{max-width:700px}
.api-key-info{color:#9aa6be;font-size:13px;margin:0 0 18px;line-height:1.7}
.new-key-display{margin-top:20px}
.new-key-alert{display:flex;gap:12px;padding:16px;background:#45372b;border:1px solid #6d5a3a;border-radius:12px;margin-bottom:14px}
.alert-icon{font-size:20px}
.new-key-alert strong{display:block;font-size:13px;margin-bottom:3px}
.new-key-alert p{margin:0;color:#dfc998;font-size:12px;line-height:1.6}
.key-copy-row{display:flex;gap:10px;align-items:center}
.key-copy-row code{flex:1;padding:12px 14px;background:#0d1729;border:1px solid #37435a;border-radius:10px;font-size:13px;color:#b8ffd8;word-break:break-all;font-family:'DM Sans',monospace}
.api-key-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 16px;background:#19263c;border:1px solid #354058;border-radius:12px;margin-bottom:8px}
.api-key-row.revoked{opacity:.5}
.api-key-prefix{font-family:monospace;color:#a88aff;font-weight:700;font-size:14px}
.api-key-date{font-size:11px;color:#8696b2}
.api-key-status-badge{font-size:10px;font-weight:700;letter-spacing:.6px;padding:5px 10px;border-radius:6px}
.api-key-status-badge.active-key{background:#1b424d;color:#50dcad;border:1px solid #30646f}
.api-key-status-badge.revoked-key{background:#412336;color:#ff8eae;border:1px solid #78465b}

/* API Reference */
.api-ref{max-width:700px}
.api-ref p{color:#9aa6be;font-size:13px;line-height:1.7;margin:0 0 14px}
.api-params{display:grid;gap:6px;margin-top:16px}
.param-row{display:flex;gap:14px;padding:10px 14px;background:#0d1729;border-radius:8px;align-items:center}
.param-row code{color:#a88aff;font-weight:700;font-size:12px;min-width:80px}
.param-row span{color:#9aa6be;font-size:12px}

/* ===== Usage Table ===== */
.usage-table-wrap,.billing-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.usage-table{width:100%;border-collapse:collapse;font-size:12px}
.usage-table th{text-align:left;padding:10px 12px;color:#8696b2;font-weight:700;font-size:10px;letter-spacing:.6px;text-transform:uppercase;border-bottom:1px solid #303b53;white-space:nowrap}
.usage-table td{padding:12px;border-bottom:1px solid #222e42;color:#c5d0e6;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.usage-table tbody tr:hover{background:rgba(255,255,255,.02)}
.usage-table .status-cell{display:flex;align-items:center;gap:6px;white-space:nowrap}

/* Mobile cards for tables */
.usage-cards-mobile,.billing-cards-mobile{display:none}
.mobile-data-card{background:#19263c;border:1px solid #354058;border-radius:12px;padding:14px 16px;margin-bottom:8px}
.mobile-data-card .mdc-row{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:4px 0;font-size:12px}
.mobile-data-card .mdc-label{color:#8696b2;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.mobile-data-card .mdc-value{color:#c5d0e6;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60%}
.mobile-data-card .mdc-value.text-val{font-weight:600;color:#eef1ff;max-width:100%;white-space:normal;word-break:break-word}
.mobile-data-card .mdc-actions{display:flex;gap:6px;margin-top:8px;padding-top:8px;border-top:1px solid #2c3650}

/* Pagination */
.pagination-row{display:flex;justify-content:center;align-items:center;gap:8px;padding-top:16px}
.pagination-row button{padding:8px 14px;font-size:12px;background:#19263c;border:1px solid #354058;border-radius:8px;color:#c5d0e6;font-weight:700}
.pagination-row button:hover{background:#263451;border-color:#7773bb}
.pagination-row button:disabled{opacity:.4;cursor:not-allowed}
.pagination-row span{font-size:12px;color:#8696b2}
.pagination-info{font-size:11px;color:#8696b2}

/* ===== Usage Quota Badge ===== */
.usage-quota-badge{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.quota-remaining{font-family:Manrope,sans-serif;font-size:28px;font-weight:800;letter-spacing:-1px;background:linear-gradient(100deg,#a88aff 10%,#59e2e1 97%);color:transparent;background-clip:text}
.quota-label{font-size:11px;color:#8da1b6}

/* ===== Billing Plans ===== */
.billing-plan-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:24px}
.billing-plan-card{background:#141e31;border:1px solid #303b53;border-radius:16px;padding:24px;position:relative;display:flex;flex-direction:column}
.billing-plan-card.featured{border-color:#9a81fe;box-shadow:0 0 36px #7d5cff22;background:linear-gradient(150deg,#292347,#182439 70%)}
.billing-plan-card.current{border-color:#50dcad;box-shadow:0 0 20px #50dcad15}
.bp-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:linear-gradient(90deg,#826aff,#b47ff7);white-space:nowrap;font-size:9px;letter-spacing:1.2px;padding:6px 14px;border-radius:20px;font-weight:800;color:white}
.bp-header{margin-bottom:14px}
.bp-header h3{font-size:18px;margin:0 0 6px}
.bp-price{font-family:Manrope,sans-serif;font-size:30px;font-weight:800;letter-spacing:-1px}
.bp-price small{font-size:12px;color:#93a2be;font-weight:500;letter-spacing:0;margin-left:3px}
.bp-features{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:10px;flex:1}
.bp-features li{font-size:12px;color:#c1cce3;padding-left:20px;position:relative}
.bp-features li::before{content:'✓';position:absolute;left:0;color:#64dbc2;font-weight:700}
.bp-action{width:100%;padding:13px;font-size:12px}
.bp-status{text-align:center;font-size:11px;color:#8da1b6;margin-top:10px}

/* ===== Responsive ===== */
@media(max-width:1100px){
  .stat-grid{grid-template-columns:repeat(2,1fr)}
  .dash-row{grid-template-columns:1fr}
}

@media(max-width:810px){
  .dash-nav{display:none}
  .mobile-tab-bar{display:flex}
  .dash-main{padding-bottom:120px}
  .stat-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .stat-card{padding:16px 14px}
  .stat-value{font-size:24px}
  .billing-plan-cards{grid-template-columns:1fr;max-width:420px}
  .usage-table-wrap,.billing-table-wrap{display:none}
  .usage-cards-mobile,.billing-cards-mobile{display:block}
  .header-actions .button-outline{font-size:10px;padding:8px 10px}
  .dash-welcome h1{font-size:28px}
  .dash-row{grid-template-columns:1fr}
}

@media(max-width:540px){
  .stat-grid{grid-template-columns:1fr 1fr;gap:8px}
  .stat-card{padding:14px 12px;border-radius:12px}
  .stat-label{font-size:9px;margin-bottom:6px}
  .stat-value{font-size:22px}
  .dash-card{padding:16px;border-radius:12px}
  .card-header h3{font-size:14px}
  .dash-welcome{flex-direction:column;gap:12px}
  .plan-badge-wrap{align-items:flex-start}
  .usage-quota-badge{align-items:flex-start}
  .quick-action-btn{padding:12px;font-size:12px}
  .recent-item{padding:12px;flex-wrap:wrap}
  .recent-item-info strong{font-size:12px}
  .api-key-row{flex-direction:column;align-items:flex-start;gap:8px}
  .key-copy-row{flex-direction:column}
  .key-copy-row code{font-size:11px}
  .param-row{flex-direction:column;gap:4px}
  .param-row code{min-width:auto}
  .chart-bars{gap:3px;height:120px}
  .chart-bars-wide{height:140px}
  .chart-bar-label{font-size:7px}
  .pagination-row{flex-wrap:wrap;gap:4px}
  .pagination-row button{padding:6px 10px;font-size:11px}
  .billing-plan-cards{gap:12px}
  .footer-inner{display:block;text-align:center}
  .footer-inner>*{display:block;margin:10px auto}
}

@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{transition:none!important;animation:none!important}
}