/* Puane CRM — visual direction v2
   Reference: approved CRM concept generated in ChatGPT.
   UI-only layer: keeps existing data/API behavior intact.
*/
:root{
  --visual-navy:#10233f;
  --visual-navy-2:#172f52;
  --visual-blue:#3b6ff5;
  --visual-blue-soft:#edf3ff;
  --visual-purple:#7561e8;
  --visual-green:#18a477;
  --visual-green-soft:#eaf8f2;
  --visual-orange:#f3a23a;
  --visual-orange-soft:#fff4e5;
  --visual-red:#e35d6a;
  --visual-bg:#f6f8fc;
  --visual-card:#ffffff;
  --visual-line:#e6ebf3;
  --visual-text:#16243a;
  --visual-muted:#7a879b;
  --visual-radius:14px;
  --visual-shadow:0 7px 24px rgba(25,49,88,.06);
}

/* Workspace */
html,body{background:var(--visual-bg)!important;color:var(--visual-text)!important}
.app,.main{background:var(--visual-bg)!important}
.main{margin-left:244px!important;padding-top:70px!important}
.content{padding:28px 32px 48px!important;max-width:1600px!important;margin:0 auto!important}

/* Header + dark navigation */
.app-header{grid-template-columns:244px minmax(220px,1fr) auto!important}
.app-header::before{left:244px!important;background:#fff!important;height:70px!important}
.app-header .brand{
  height:70px!important;
  padding:0 24px!important;
  background:var(--visual-navy)!important;
  border:0!important;
}
.app-header .brand-logo{filter:brightness(0) invert(1)!important;width:132px!important}
#navigation{
  width:244px!important;
  background:var(--visual-navy)!important;
  padding:24px 13px 22px!important;
  gap:22px!important;
  border:0!important;
  scrollbar-color:#365071 transparent!important;
}
#navigation .nav-section-label{color:#7890ad!important;padding-left:13px!important}
#navigation button{
  color:#aebdd0!important;
  min-height:43px!important;
  height:43px!important;
  border-radius:9px!important;
  font-size:12px!important;
}
#navigation button:hover{background:#ffffff0d!important;color:#fff!important}
#navigation button.active{
  color:#fff!important;
  background:#285386!important;
  box-shadow:inset 3px 0 0 #62a0ff!important;
}
#navigation button.active svg{color:#82b4ff!important}
#navigation button svg{width:18px!important;height:18px!important}

/* Search / account bar */
.app-header .global-search{
  margin-left:28px!important;
  width:min(520px,calc(100% - 56px))!important;
  height:40px!important;
  border-radius:10px!important;
  background:#f7f9fc!important;
  border-color:#e3e9f2!important;
}
.app-header .top-actions{padding:0 28px!important}
.app-header .notification-button{color:#60718b!important}
.app-header .top-profile-avatar{
  background:#edf3ff!important;
  border-color:#d8e4fb!important;
  color:#3263d7!important;
}

/* Page headings */
.page-head{margin-bottom:22px!important}
.page-head h2{font-size:28px!important;letter-spacing:-.045em!important}
.page-head p{font-size:12px!important;color:var(--visual-muted)!important}
.page-head .eyebrow,.home-kicker{color:var(--visual-blue)!important}

/* Global cards */
.metric,.panel,.card,.table-wrap,.home-panel,.home-kpi{
  border:1px solid var(--visual-line)!important;
  border-radius:var(--visual-radius)!important;
  box-shadow:var(--visual-shadow)!important;
  background:var(--visual-card)!important;
}
.metric{padding:18px!important}
.primary{
  background:var(--visual-blue)!important;
  border-color:var(--visual-blue)!important;
  border-radius:9px!important;
  color:#fff!important;
}
.primary:hover{background:#2f60dd!important}

/* Dashboard */
.home-dashboard{max-width:1500px!important}
.home-overview-header{
  margin-bottom:20px!important;
  border:0!important;
  background:transparent!important;
}
.home-overview-header h1{
  font-size:30px!important;
  font-weight:750!important;
  letter-spacing:-.05em!important;
  color:var(--visual-text)!important;
}
.home-overview-header>div:first-child>p:last-child{
  color:var(--visual-muted)!important;
}
.home-period{
  border:1px solid var(--visual-line)!important;
  border-radius:12px!important;
  background:#fff!important;
  box-shadow:var(--visual-shadow)!important;
}
.home-kpi-grid{gap:14px!important}
.home-kpi{
  min-height:128px!important;
  padding:19px!important;
}
.home-kpi:nth-child(1) .home-kpi-icon{background:var(--visual-blue-soft)!important;color:var(--visual-blue)!important}
.home-kpi:nth-child(2) .home-kpi-icon{background:var(--visual-green-soft)!important;color:var(--visual-green)!important}
.home-kpi:nth-child(3) .home-kpi-icon{background:#f0edff!important;color:var(--visual-purple)!important}
.home-kpi:nth-child(4) .home-kpi-icon{background:var(--visual-orange-soft)!important;color:var(--visual-orange)!important}
.home-kpi strong{font-size:29px!important;color:var(--visual-text)!important}
.home-kpi small{color:var(--visual-muted)!important}
.home-panel{padding:20px!important}
.home-panel-heading h2{font-size:15px!important;color:var(--visual-text)!important}
.home-panel-heading p{color:var(--visual-muted)!important}
.home-link{color:var(--visual-blue)!important}
.home-funnel-bar{background:#f0f3f8!important}
.home-funnel-bar i{background:linear-gradient(90deg,#4778f5,#718cf0)!important}
.home-action-row,.home-team-row,.home-activity-row,.home-channel-row{border-color:#edf0f5!important}
.home-priority.yuksek,.home-priority.high{background:#fff0f1!important;color:var(--visual-red)!important}
.home-priority.normal{background:#edf3ff!important;color:var(--visual-blue)!important}
.home-priority.dusuk{background:#eaf8f2!important;color:var(--visual-green)!important}
.home-trend-svg .home-line-in{stroke:var(--visual-blue)!important}
.home-trend-svg .home-line-out{stroke:var(--visual-green)!important}
.home-trend-svg .home-line-prev{stroke:#aeb8c7!important}
.home-trend-svg .home-area{fill:rgba(59,111,245,.10)!important}

/* Tables */
.table-wrap{overflow:hidden!important}
table th{background:#f8fafd!important;color:#7c899d!important;border-color:#edf0f5!important}
table td{border-color:#edf0f5!important;color:#44536a!important}
tbody tr:hover{background:#f8faff!important}
.badge.green{background:#e9f8f1!important;color:#178b6d!important}
.badge.coral{background:#fff2e6!important;color:#b97620!important}

/* Inbox */
.inbox-shell{
  border:1px solid var(--visual-line)!important;
  border-radius:var(--visual-radius)!important;
  box-shadow:var(--visual-shadow)!important;
  overflow:hidden!important;
}
.conversation-pane,.thread,.messages{background:#fff!important}
.conversation.selected{background:#eef4ff!important}
.conversation.selected:before{background:var(--visual-blue)!important}
.thread-head{background:#fff!important}
.bubble.out{background:#edf3ff!important;border-color:#dce7ff!important}
.bubble{border-color:#e7ebf1!important;background:#f7f9fc!important}
.channel-tabs .active{border-color:var(--visual-blue)!important;color:var(--visual-blue)!important}

/* Form controls */
input,select,textarea{
  border-color:#dfe6f0!important;
  border-radius:9px!important;
  background:#fff!important;
}
input:focus,select:focus,textarea:focus{
  border-color:#91adf6!important;
  box-shadow:0 0 0 3px rgba(59,111,245,.10)!important;
}

/* Login stays brand-consistent */
.login-visual{background:var(--visual-navy)!important}
.login-visual:after{background:linear-gradient(180deg,rgba(16,35,63,.28),rgba(16,35,63,.94))!important}
.login-message .eyebrow{color:#7eb0ff!important}
.login-dot{background:#69a5ff!important}
.login-card h1{color:var(--visual-text)!important}

/* Responsive */
@media(max-width:900px){
  .main{margin-left:0!important;padding-top:102px!important}
  .content{padding:20px 18px 34px!important}
  .app-header{grid-template-columns:minmax(95px,1fr) minmax(130px,260px) auto!important}
  .app-header::before{left:0!important;height:60px!important}
  .app-header .brand{background:#fff!important;height:60px!important}
  .app-header .brand-logo{filter:none!important;width:112px!important}
  #navigation{background:#fff!important;width:calc(100vw - 24px)!important;padding:0!important}
  #navigation button{color:#56647a!important}
  #navigation button.active{background:#edf2ff!important;color:var(--visual-blue)!important;box-shadow:inset 0 -2px 0 var(--visual-blue)!important}
  #navigation button.active svg{color:var(--visual-blue)!important}
}
@media(max-width:560px){
  .content{padding:16px 12px 28px!important}
  .home-overview-header h1{font-size:25px!important}
  .home-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}