/* CommercialOS V7.3.3 — Dark Cinematic / Glass & Layered application theme
   Visual direction based on the approved dashboard reference: deep navy canvas,
   layered surfaces, crisp borders, subtle glow, and clear hierarchy.
   This file is loaded last and is presentation-only; it does not alter application logic.
*/
:root{
  --cos-bg:#07111f;
  --cos-bg-2:#0a1627;
  --cos-surface:#0d1a2b;
  --cos-surface-2:#101f33;
  --cos-surface-3:#13263d;
  --cos-border:#2a4668;
  --cos-border-soft:#1e3552;
  --cos-text:#f4f8ff;
  --cos-text-2:#d7e3f2;
  --cos-muted:#9db0c8;
  --cos-blue:#3b82f6;
  --cos-blue-soft:#69a7ff;
}

.app{
  background:
    radial-gradient(900px 420px at 76% -8%,rgba(37,99,235,.16),transparent 62%),
    radial-gradient(760px 480px at 12% 72%,rgba(14,116,144,.10),transparent 68%),
    var(--cos-bg)!important;
  color:var(--cos-text)!important;
}
.app-body{
  background:transparent!important;
  min-height:calc(100vh - 70px);
}
.header{
  background:rgba(8,19,34,.96)!important;
  border-bottom:1px solid var(--cos-border)!important;
  box-shadow:0 8px 30px rgba(0,0,0,.18);
  backdrop-filter:blur(16px);
}
.header-search{
  background:#0d1a2b!important;
  border:1px solid #2b4564!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03),0 0 0 1px rgba(37,99,235,.02);
}
.sidebar{
  background:linear-gradient(180deg,#091426 0%,#071120 100%)!important;
  border-right:1px solid var(--cos-border)!important;
  box-shadow:12px 0 35px rgba(0,0,0,.14);
}
.sidebar a.menu-item{color:#aebed2!important}
.sidebar a.menu-item:hover{background:#12233a!important;color:#fff!important}
.sidebar a.menu-item.active{
  background:linear-gradient(135deg,#164a91,#173768)!important;
  border:1px solid #3479d4!important;
  box-shadow:0 8px 25px rgba(37,99,235,.20),inset 0 1px 0 rgba(255,255,255,.08);
}
.sidebar .sidebar-divider,.sidebar hr{border-color:var(--cos-border-soft)!important}

.content{
  position:relative;
  isolation:isolate;
  min-height:calc(100vh - 70px);
  padding:30px 34px!important;
  background:
    radial-gradient(620px 260px at 82% 0%,rgba(59,130,246,.08),transparent 70%),
    linear-gradient(180deg,#0a1525 0%,#081321 100%)!important;
}
.content:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.32;
  background-image:
    linear-gradient(rgba(120,160,210,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(120,160,210,.035) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:linear-gradient(to bottom,black,transparent 80%);
}

.page-header{
  padding:4px 2px 20px!important;
  margin-bottom:20px!important;
  border-bottom:1px solid rgba(71,105,142,.30);
}
.page-title{color:#f7fbff!important}
.page-subtitle{color:#9db0c8!important}
.eyebrow,.section-kicker{color:#5da3ff!important}

/* Shared layered surfaces */
.app .card,
.app .box,
.app .panel,
.app .settings-nav,
.app .settings-panel{
  background:linear-gradient(145deg,rgba(16,31,51,.98),rgba(11,25,42,.98))!important;
  color:var(--cos-text)!important;
  border:1px solid var(--cos-border)!important;
  box-shadow:0 14px 35px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.025)!important;
}
.app .card:hover{
  border-color:#365b83;
}
.app .card h1,.app .card h2,.app .card h3,.app .card h4,.app .card strong{color:#f4f8ff}
.app .card p,.app .card small,.app .card li{color:#b6c6d9}

/* Dashboard / intelligence blocks that were historically light */
.app .co-revenue-risk.card,
.app .co-conversion.card,
.app .co-intelligence.card,
.app .co-customer-intel.card,
.app .co-priority.card,
.app .co-dashboard-tail{
  background:linear-gradient(145deg,#0f1e31,#0b192a)!important;
  color:#f4f8ff!important;
  border-color:#2a4668!important;
}
.app .co-revenue-kpis>div,
.app .co-conversion-grid>div,
.app .co-forecast-grid>div,
.app .co-customer-intel-panel,
.app .co-priority-item,
.app .co-dashboard-tail-card,
.app .co-stage-list div,
.app .co-activity-row,
.app .co-intelligence-item{
  background:#101f33!important;
  color:#edf4fd!important;
  border-color:#2a4668!important;
}
.app .co-priority-item.critico,.app .co-intelligence-item.critico{background:#24161d!important;border-color:#713b49!important}
.app .co-priority-item.alto,.app .co-intelligence-item.alto{background:#261f14!important;border-color:#6d5728!important}
.app .co-customer-intel-panel.risk{background:#24161d!important;border-color:#713b49!important}
.app .co-customer-intel-panel.expansion{background:#10243b!important;border-color:#315c8c!important}
.app .co-revenue-risk h2,.app .co-conversion h2,.app .co-intelligence h2,.app .co-customer-intel h2,.app .co-priority h2,.app .co-dashboard-tail h2{color:#f7fbff!important}
.app .co-revenue-risk p,.app .co-conversion p,.app .co-intelligence p,.app .co-customer-intel p,.app .co-priority p,.app .co-dashboard-tail p{color:#aebfd2!important}
.app .co-priority-main small,.app .co-priority-value small,.app .co-customer-intel-item small,.app .co-activity-row small,.app .co-activity-row time,.app .co-stage-list span{color:#a8b9cd!important}
.app .co-priority-item,.app .co-customer-intel-item,.app .co-stage-list div,.app .co-activity-row{text-decoration:none}

/* Operational panels */
.app .dashboard-action-center,
.app .fila-hero,
.app .fila-list-card,
.app .fila-note,
.app .dashboard-action-item,
.app .action-kpi,
.app .co-onboarding-strip,
.app .co-subscription-status{
  background:linear-gradient(145deg,#0f1f32,#0b192a)!important;
  border-color:#2a4668!important;
}
.app .dashboard-action-item:hover{background:#13263e!important;border-color:#3b82f6!important}
.app .fila-kpi{background:#101f33!important;border-color:#2a4668!important}
.app .fila-item{background:#0f1e31!important;border-color:#2a4668!important}
.app .fila-item:hover{background:#12263d!important;border-color:#4a83ba!important}
.app .fila-empty{background:#0b1a2c!important;border-color:#315579!important}

/* Forms: dark, structured and high contrast */
.app input,.app select,.app textarea,
.app .help-form input,.app .help-form textarea,
.app .automation-field textarea,
.app .trial-input{
  background:#0a1728!important;
  color:#eef5fd!important;
  border-color:#304b6b!important;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.16);
}
.app input::placeholder,.app textarea::placeholder{color:#7f95ae!important;opacity:1}
.app input:focus,.app select:focus,.app textarea:focus{
  border-color:#4d92ed!important;
  box-shadow:0 0 0 3px rgba(59,130,246,.16)!important;
}
.app label{color:#d8e5f3!important}

/* Tables */
.app .table-container,.app .table{background:transparent!important}
.app .table th{color:#9fb3ca!important;border-color:#2a4668!important}
.app .table td{color:#d9e5f2!important;border-color:#223a58!important}
.app .table tr:hover td{background:rgba(31,58,88,.30)!important}

/* Buttons and controls */
.app .btn-secondary{
  background:#101f33!important;
  color:#dce9f7!important;
  border:1px solid #385775!important;
}
.app .btn-secondary:hover{background:#162a43!important;border-color:#5a88b5!important}
.app .btn-primary{box-shadow:0 7px 20px rgba(37,99,235,.22)}
.app .header-icon{border-color:#2d4868!important;background:#0d1b2c!important}

/* Modals / overlays */
.app .modal-content,.app .modal-dialog,.app .command-box,.app .notification-panel,
.app .menu-config-dialog,.app .popover,.app .dropdown-menu{
  background:linear-gradient(145deg,#101f33,#0b1829)!important;
  color:#eef5fd!important;
  border:1px solid #365574!important;
  box-shadow:0 25px 70px rgba(0,0,0,.48)!important;
}
.app .modal-content p,.app .modal-dialog p{color:#b5c5d8}

/* Automation / onboarding legacy light surfaces */
.app .automation-card,.app .automation-info,.app .automation-more,
.app .cos-panel,.app .cos-side-card,.app .cos-kpi,
.app .co-forecast,.app .co-funnel,.app .co-evolution,.app .co-team,.app .co-onboarding,.app .co-customer,
.app .trial-card,.app .trial-step,.app .trial-consent,.app .document-preview{
  background:linear-gradient(145deg,#101f33,#0c1a2b)!important;
  color:#eef5fd!important;
  border-color:#2a4668!important;
}
.app .automation-card p,.app .automation-info p,.app .cos-panel p,.app .co-onboarding p,.app .trial-card p{color:#aebfd2!important}

/* WhatsApp: preserve its functional layout, bring surfaces into the same visual system. */
.app .wpp-sidebar,.app .wpp-profile-panel,.app .wpp-access-panel,.app .wpp-automation-panel{
  background:linear-gradient(180deg,#0d1a2b,#091625)!important;
  border-color:#294663!important;
}
.app .wpp-chat-item:hover,.app .wpp-chat-item.active{background:#13263d!important}
.app .wpp-bubble.recebida{background:#13263d!important;color:#e7f0f9!important}
.app .wpp-footer input,.app .wpp-chat-search input{background:#0a1728!important;color:#eef5fd!important;border-color:#304b6b!important}

/* Trial banners: retain semantic warning/info colors but make them belong to the dark shell. */
.app .co-trial-banner,.app .co-subscription-expired,.app .co-subscription-trial{
  color:#eef5fd!important;
  background:linear-gradient(145deg,#10243b,#0d1d30)!important;
  border-color:#315a86!important;
}
.app .co-trial-main small,.app .co-trial-side small,.app .co-subscription-expired p,.app .co-subscription-trial p{color:#aebfd2!important}

/* Help center / support */
.app .help-hero p{color:#aebfd2!important}
.app .help-hero-icon{background:#10243b!important;border-color:#315a86!important}
.app .help-category details{border-color:#29435f!important}
.app .help-form-footer span{color:#69d391!important}

/* Decorative separators and badges */
.app hr{border-color:#233d5a!important}
.app .badge,.app .tag{border-color:#315579!important}

@media(max-width:900px){
  .content{padding:24px 18px!important}
}
@media(max-width:600px){
  .content{padding:20px 14px!important}
  .page-header{padding-bottom:16px!important}
}