/* Complaints Page Modern Redesign */
@import url('./design-tokens.css');

.complaints-shell{display:flex;flex-direction:column;gap:var(--space-7);}
.complaint-layout{display:flex;gap:var(--space-7);align-items:flex-start;}
.complaint-layout .complaint-main-panel{max-width:100%;}
@media (max-width:991px){.complaint-layout{flex-direction:column;}}

/* Sidebar reuse */
.complaint-layout .sidebar{position:sticky;top:90px;}

/* Main Panel */
.complaint-main-panel{flex:1 1 auto;display:flex;flex-direction:column;gap:var(--space-6);}

.complaint-card{background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius-xl);padding:var(--space-7) var(--space-7);box-shadow:var(--shadow-md);position:relative;overflow:hidden;}
:root[data-theme='dark'] .complaint-card{background:#1f2529;border-color:#30363b;}

.complaint-card::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 85% 15%,rgba(var(--color-brand-primary-rgb),.12),transparent 60%);pointer-events:none;}

/* Tabs */
.complaint-tabs{display:flex;gap:4px;background:var(--gray-50);padding:6px;border-radius:var(--radius-pill);width:max-content;box-shadow:var(--shadow-xs);margin:0 auto var(--space-6);position:relative;}
:root[data-theme='dark'] .complaint-tabs{background:#22292e;}
.complaint-tab{border:0;background:transparent;padding:10px 22px;font-weight:600;font-size:14px;border-radius:var(--radius-pill);cursor:pointer;color:var(--gray-600);position:relative;transition:var(--transition-fast);display:flex;align-items:center;gap:8px;}
.complaint-tab:hover{color:var(--color-brand-primary);} 
.complaint-tab[aria-selected='true']{background:linear-gradient(90deg,var(--color-brand-primary),var(--color-brand-secondary));color:#fff;box-shadow:var(--shadow-sm);} 

/* Form Wrapper */
.complaint-form-wrapper{background:#fff;border:1.5px solid var(--gray-200);border-radius:var(--radius-xl);padding:var(--space-7) var(--space-7);box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:var(--space-7);}
.complaint-form-wrapper{width:100%;}
/* Lebarkan card agar tidak terasa sempit bila container besar */
.complaint-card{max-width:100%;}
/* Pastikan grid field bisa melebar proporsional */
.fields-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
@media (min-width:1200px){
  .complaint-layout{gap:var(--space-8);} 
  .complaint-card{padding:var(--space-7) clamp(2rem,3vw,3rem);} 
}
/* Jika sidebar terlalu kecil vs form, tetap jaga rasio */
.complaint-layout .sidebar{flex:0 0 300px;max-width:300px;}
.complaint-layout .complaint-main-panel{flex:1 1 auto;}
:root[data-theme='dark'] .complaint-form-wrapper{background:#1d2327;border-color:#2d3439;}

.form-header-modern{text-align:center;max-width:760px;margin:0 auto var(--space-7);}
.form-header-modern h2{margin:0 0 var(--space-3);font-size:32px;}
.form-header-modern p{margin:0;color:var(--gray-600);}
:root[data-theme='dark'] .form-header-modern p{color:var(--gray-400);}

/* Section */
.complaint-section{background:var(--gray-50);border:1px solid var(--gray-200);border-radius:var(--radius-lg);padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-5);position:relative;}
.complaint-section:not(:last-child){margin-bottom:var(--space-2);} 
:root[data-theme='dark'] .complaint-section{background:#22292e;border-color:#2f363c;}
.complaint-section::before{content:"";position:absolute;top:0;left:0;width:4px;height:100%;background:linear-gradient(to bottom,var(--color-brand-primary),var(--color-brand-secondary));border-radius:4px 0 0 4px;}
.section-heading{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:700;margin:0 0 var(--space-2);}
.section-heading i{color:var(--color-brand-primary);}

/* Fields Grid */
.fields-grid{display:grid;gap:var(--space-5);grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}

/* Inputs override */
.complaint-form-wrapper .form-control-modern,.complaint-form-wrapper textarea.form-control-modern,.complaint-form-wrapper select.form-control-modern{padding:14px 16px;border:1.5px solid var(--gray-300);border-radius:var(--radius-md);background:#fff;font:inherit;transition:var(--transition-fast);} 
.complaint-form-wrapper .form-control-modern:focus{outline:none;border-color:var(--color-brand-primary);box-shadow:0 0 0 3px rgba(var(--color-brand-primary-rgb),.25);} 
:root[data-theme='dark'] .complaint-form-wrapper .form-control-modern{background:#1f2529;border-color:#2d3439;color:var(--gray-200);} 

/* File upload simplified */
.file-upload-wrapper{position:relative;display:flex;align-items:center;gap:10px;} 
.file-upload-wrapper input[type='file']{display:none;} 
.file-upload-label{background:var(--gray-100);padding:10px 16px;border-radius:var(--radius-md);font-size:13px;font-weight:500;cursor:pointer;display:inline-flex;align-items:center;gap:8px;color:var(--gray-700);transition:var(--transition-fast);} 
.file-upload-label:hover{background:var(--color-brand-primary);color:#fff;} 
:root[data-theme='dark'] .file-upload-label{background:#2a3136;color:var(--gray-300);} :root[data-theme='dark'] .file-upload-label:hover{background:var(--color-brand-primary);} 

/* Agreement + Actions */
.form-agreement{background:var(--gray-50);padding:var(--space-5);border:1px dashed var(--gray-300);border-radius:var(--radius-lg);font-size:13px;display:flex;gap:12px;align-items:flex-start;}
:root[data-theme='dark'] .form-agreement{background:#232a30;border-color:#343c43;}
.submit-bar{display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:center;justify-content:flex-start;}

/* Primary button context styling reuse from .btn but adjust size */
.btn-large{padding:14px 28px;font-size:15px;border-radius:var(--radius-lg);} 

/* Info card */
.inline-info{display:flex;gap:14px;background:linear-gradient(135deg,var(--color-brand-primary),var(--color-brand-secondary));padding:var(--space-5);border-radius:var(--radius-lg);color:#fff;align-items:flex-start;box-shadow:var(--shadow-md);} 
.inline-info i{font-size:26px;}
.inline-info p{margin:0;font-size:14px;line-height:1.5;}

/* Tabs content visibility */
.tabpanel{display:none;animation:fadeTab .4s ease;} .tabpanel.active{display:block;} @keyframes fadeTab{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}

/* Breadcrumb refinement */
.page-header-modern .breadcrumb{background:rgba(255,255,255,.15);padding:6px 14px;border-radius:var(--radius-pill);backdrop-filter:blur(4px);}
:root[data-theme='dark'] .page-header-modern .breadcrumb{background:rgba(0,0,0,.25);} 

/* Focus ring utility */
:focus-visible{outline:2px solid var(--color-brand-primary);outline-offset:2px;}

/* Improve contrast specific cases */
.page-header-modern h1{color:#fff;} .page-header-modern p{color:rgba(255,255,255,.9);} 

/* Narrow screens spacing */
@media (max-width:600px){
  .complaint-card,.complaint-form-wrapper{padding:var(--space-6) var(--space-5);} 
  .complaint-tabs{margin-left:0;margin-right:0;}
}