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

:root{
--c-bg:#f5f8f7;
--c-surface:#fff;
--c-surface-soft:#f8fbfa;
--c-text:#263633;
--c-muted:#6f7f7b;
--c-primary:#356c68;
--c-primary-dark:#244d4a;
--c-primary-light:#dfeceb;
--c-accent:#d7a7b7;
--c-accent-soft:#f6e9ee;
--c-border:#dfe8e5;
--c-success:#2f7d52;
--c-success-soft:#eaf7ef;
--c-warning:#b97a15;
--c-warning-soft:#fff6df;
--c-danger:#b83a4b;
--c-danger-soft:#ffebee;
--c-info:#356a9a;
--c-info-soft:#edf5ff;
--c-shadow:0 12px 32px rgba(42,71,66,.08);
--c-shadow-lg:0 22px 55px rgba(42,71,66,.14);
--c-radius-sm:10px;
--c-radius:14px;
--c-radius-lg:20px;
--c-transition:.22s ease
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0;min-height:100%}
body{
font-family:'Poppins',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
background:var(--c-bg);
color:var(--c-text);
font-size:14px;
line-height:1.6;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility
}

body.menu-open{overflow:hidden}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit}
button{color:inherit}
a{color:var(--c-primary);text-decoration:none;transition:var(--c-transition)}
a:hover{color:var(--c-primary-dark)}
::selection{background:var(--c-primary-light);color:var(--c-primary-dark)}

.container{
width:min(1180px,calc(100% - 32px));
margin:0 auto
}

.main-content{
min-height:calc(100vh - 170px);
padding:26px 0 36px
}

.page-shell{display:grid;gap:20px}

.page-header{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:18px;
margin-bottom:20px
}

.page-header h1,
.page-header h2{
margin:0 0 5px;
color:var(--c-primary-dark);
line-height:1.25
}

.page-header p{margin:0;color:var(--c-muted)}

.page-actions{
display:flex;
align-items:center;
gap:10px;
flex-wrap:wrap
}

.text-muted{color:var(--c-muted)}
.text-center{text-align:center}
.text-right{text-align:right}
.text-success{color:var(--c-success)}
.text-warning{color:var(--c-warning)}
.text-danger{color:var(--c-danger)}
.mt-0{margin-top:0}
.mt-1{margin-top:8px}
.mt-2{margin-top:16px}
.mt-3{margin-top:24px}
.mb-0{margin-bottom:0}
.mb-1{margin-bottom:8px}
.mb-2{margin-bottom:16px}
.mb-3{margin-bottom:24px}
.hidden{display:none!important}

.site-header{
position:sticky;
top:0;
z-index:100;
background:rgba(255,255,255,.94);
backdrop-filter:blur(15px);
border-bottom:1px solid rgba(223,232,229,.92)
}

.header-inner{
min-height:76px;
display:flex;
align-items:center;
justify-content:space-between;
gap:18px
}

.brand{
display:flex;
align-items:center;
gap:12px;
min-width:0
}

.brand-logo{
width:44px;
height:44px;
border-radius:14px;
object-fit:cover;
background:var(--c-primary-light);
border:1px solid var(--c-border)
}

.brand-text{
display:grid;
line-height:1.15;
min-width:0
}

.brand-name{
font-size:15px;
font-weight:700;
color:var(--c-primary-dark);
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis
}

.brand-subtitle{
font-size:11px;
color:var(--c-muted);
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis
}

.main-nav{
display:flex;
align-items:center;
gap:4px
}

.main-nav a{
display:flex;
align-items:center;
gap:8px;
padding:10px 12px;
border-radius:11px;
font-size:12px;
font-weight:500;
color:var(--c-muted)
}

.main-nav a:hover,
.main-nav a.active{
background:var(--c-primary-light);
color:var(--c-primary-dark)
}

.main-nav svg{
width:17px;
height:17px;
flex:0 0 auto
}

.user-area{
display:flex;
align-items:center;
gap:10px
}

.user-card{
display:flex;
align-items:center;
gap:10px;
padding:6px 9px;
border-radius:13px;
background:var(--c-surface-soft);
border:1px solid var(--c-border)
}

.user-avatar{
width:36px;
height:36px;
border-radius:50%;
display:grid;
place-items:center;
background:linear-gradient(135deg,var(--c-primary),var(--c-primary-dark));
color:#fff;
font-size:12px;
font-weight:700
}

.user-meta{
display:grid;
line-height:1.2
}

.user-meta strong{
font-size:11px;
color:var(--c-primary-dark)
}

.user-meta span{
font-size:10px;
color:var(--c-muted)
}

.menu-toggle{
display:none;
width:42px;
height:42px;
border:1px solid var(--c-border);
border-radius:12px;
background:#fff;
cursor:pointer;
place-items:center
}

.menu-toggle span,
.menu-toggle:before,
.menu-toggle:after{
content:"";
display:block;
width:20px;
height:2px;
background:var(--c-primary-dark);
transition:var(--c-transition)
}

.menu-toggle span{margin:4px 0}

.breadcrumbs{
display:flex;
align-items:center;
gap:7px;
flex-wrap:wrap;
margin-bottom:15px;
font-size:11px;
color:var(--c-muted)
}

.breadcrumbs a{color:var(--c-muted)}
.breadcrumbs a:hover{color:var(--c-primary)}
.breadcrumbs .separator{opacity:.55}

.card{
background:var(--c-surface);
border:1px solid var(--c-border);
border-radius:var(--c-radius-lg);
box-shadow:var(--c-shadow);
padding:22px
}

.card-header{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:16px;
margin-bottom:18px
}

.card-title{
margin:0;
color:var(--c-primary-dark);
font-size:17px;
line-height:1.3
}

.card-subtitle{
margin:4px 0 0;
color:var(--c-muted);
font-size:12px
}

.card-body{min-width:0}

.card-footer{
margin-top:18px;
padding-top:16px;
border-top:1px solid var(--c-border)
}

.card-soft{
background:var(--c-surface-soft);
box-shadow:none
}

.card-clickable{
transition:transform var(--c-transition),box-shadow var(--c-transition),border-color var(--c-transition)
}

.card-clickable:hover{
transform:translateY(-2px);
box-shadow:var(--c-shadow-lg);
border-color:#cbdad6
}

.grid{
display:grid;
gap:16px
}

.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}

.stats-grid{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:15px
}

.stat-card{
background:#fff;
border:1px solid var(--c-border);
border-radius:17px;
padding:18px;
display:flex;
align-items:center;
gap:14px;
box-shadow:var(--c-shadow)
}

.stat-icon{
width:46px;
height:46px;
border-radius:14px;
display:grid;
place-items:center;
background:var(--c-primary-light);
color:var(--c-primary-dark);
font-size:20px;
flex:0 0 auto
}

.stat-info{min-width:0}

.stat-label{
font-size:10px;
text-transform:uppercase;
letter-spacing:.06em;
color:var(--c-muted)
}

.stat-value{
font-size:22px;
font-weight:700;
color:var(--c-primary-dark);
line-height:1.2;
margin-top:2px
}

.stat-helper{
font-size:10px;
color:var(--c-muted);
margin-top:2px
}

.btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
min-height:42px;
padding:10px 16px;
border:1px solid transparent;
border-radius:12px;
background:var(--c-primary);
color:#fff;
font-size:12px;
font-weight:600;
line-height:1;
cursor:pointer;
transition:transform var(--c-transition),box-shadow var(--c-transition),background var(--c-transition),border-color var(--c-transition);
white-space:nowrap
}

.btn:hover{
background:var(--c-primary-dark);
color:#fff;
transform:translateY(-1px);
box-shadow:0 8px 20px rgba(53,108,104,.18)
}

.btn:active{transform:translateY(0)}

.btn:disabled,
.btn.disabled{
opacity:.55;
cursor:not-allowed;
pointer-events:none;
transform:none;
box-shadow:none
}

.btn-outline{
background:transparent;
color:var(--c-primary-dark);
border-color:var(--c-primary)
}

.btn-outline:hover{
background:var(--c-primary-light);
color:var(--c-primary-dark);
box-shadow:none
}

.btn-soft{
background:var(--c-primary-light);
color:var(--c-primary-dark)
}

.btn-soft:hover{
background:#cfe1df;
color:var(--c-primary-dark)
}

.btn-ok,
.btn-success{background:var(--c-success)}

.btn-ok:hover,
.btn-success:hover{background:#246842}

.btn-warn{background:var(--c-warning)}
.btn-warn:hover{background:#9e6610}

.btn-danger{background:var(--c-danger)}
.btn-danger:hover{background:#982f3d}

.btn-info{background:var(--c-info)}
.btn-info:hover{background:#2b567d}

.btn-sm{
min-height:34px;
padding:8px 11px;
font-size:11px;
border-radius:10px
}

.btn-lg{
min-height:50px;
padding:13px 20px;
font-size:13px
}

.btn-block{width:100%}

.btn-icon{
width:42px;
padding:0
}

.form{
display:grid;
gap:16px
}

.form-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:15px
}

.form-group,
.field{
display:grid;
gap:7px
}

.form-group.full,
.field.full{
grid-column:1/-1
}

.form-group label,
.field label{
font-size:11px;
font-weight:600;
color:var(--c-primary-dark)
}

.required:after{
content:" *";
color:var(--c-danger)
}

.input,
select,
textarea{
width:100%;
min-height:46px;
padding:11px 13px;
border:1px solid var(--c-border);
border-radius:12px;
background:#fbfdfc;
color:var(--c-text);
outline:none;
transition:border-color var(--c-transition),box-shadow var(--c-transition),background var(--c-transition)
}

textarea{
min-height:110px;
resize:vertical;
line-height:1.55
}

.input:focus,
select:focus,
textarea:focus{
background:#fff;
border-color:var(--c-primary);
box-shadow:0 0 0 3px rgba(53,108,104,.1)
}

.input::placeholder,
textarea::placeholder{
color:#9ba9a6
}

.input:disabled,
select:disabled,
textarea:disabled{
background:#f1f4f3;
color:#8f9b98;
cursor:not-allowed
}

.input-error{
border-color:var(--c-danger)!important;
box-shadow:0 0 0 3px rgba(184,58,75,.08)!important
}

.field-error{
font-size:10px;
color:var(--c-danger)
}

.field-help,
.field small,
.form-help{
font-size:10px;
color:var(--c-muted);
line-height:1.55
}

.checkbox,
.radio{
display:flex;
align-items:flex-start;
gap:9px;
font-size:12px;
color:var(--c-text)
}

.checkbox input,
.radio input{
margin-top:3px;
accent-color:var(--c-primary)
}

.input-group{display:flex}

.input-group .input{
border-radius:12px 0 0 12px
}

.input-group .btn{
border-radius:0 12px 12px 0
}

.alert{
display:flex;
align-items:flex-start;
gap:11px;
padding:13px 15px;
border-radius:13px;
border:1px solid;
font-size:12px;
line-height:1.6
}

.alert-success{
background:var(--c-success-soft);
border-color:#ccebd7;
color:#23633c
}

.alert-warning{
background:var(--c-warning-soft);
border-color:#f1dfae;
color:#735719
}

.alert-danger,
.alert-error{
background:var(--c-danger-soft);
border-color:#ffd1d7;
color:#a62838
}

.alert-info{
background:var(--c-info-soft);
border-color:#d3e5fa;
color:#2c5f8a
}

.badge{
display:inline-flex;
align-items:center;
justify-content:center;
gap:5px;
padding:5px 9px;
border-radius:999px;
background:var(--c-primary-light);
color:var(--c-primary-dark);
font-size:10px;
font-weight:700;
line-height:1
}

.badge.pendente{
background:var(--c-warning-soft);
color:#8d5c0d
}

.badge.confirmado,
.badge.ativo,
.badge.aprovado{
background:var(--c-success-soft);
color:#23633c
}

.badge.cancelado,
.badge.inativo,
.badge.rejeitado{
background:var(--c-danger-soft);
color:#a62838
}

.badge.concluido,
.badge.finalizado{
background:var(--c-info-soft);
color:#2d5f8a
}

.table-wrap{
width:100%;
overflow:auto;
border:1px solid var(--c-border);
border-radius:15px;
background:#fff
}

.table{
width:100%;
border-collapse:collapse;
min-width:680px
}

.table th{
padding:12px 14px;
background:#f5f9f8;
color:var(--c-muted);
font-size:10px;
text-transform:uppercase;
letter-spacing:.05em;
text-align:left;
border-bottom:1px solid var(--c-border);
white-space:nowrap
}

.table td{
padding:13px 14px;
border-bottom:1px solid #edf1f0;
font-size:12px;
vertical-align:middle
}

.table tbody tr:last-child td{
border-bottom:0
}

.table tbody tr:hover{
background:#fbfdfc
}

.table-actions{
display:flex;
align-items:center;
gap:7px;
flex-wrap:wrap
}

.table-empty{
text-align:center;
padding:36px!important;
color:var(--c-muted)
}

.empty-state{
padding:44px 20px;
text-align:center;
border:1px dashed var(--c-border);
border-radius:17px;
background:var(--c-surface-soft)
}

.empty-state-icon{
width:66px;
height:66px;
margin:0 auto 14px;
border-radius:50%;
display:grid;
place-items:center;
background:var(--c-primary-light);
color:var(--c-primary-dark);
font-size:27px
}

.empty-state h3{
margin:0 0 6px;
color:var(--c-primary-dark);
font-size:16px
}

.empty-state p{
max-width:500px;
margin:0 auto;
color:var(--c-muted);
font-size:12px
}

.login-page{
min-height:100vh;
display:grid;
place-items:center;
padding:24px;
background:
radial-gradient(circle at top left,rgba(215,167,183,.22),transparent 35%),
radial-gradient(circle at bottom right,rgba(53,108,104,.17),transparent 35%),
var(--c-bg)
}

.login-wrap{
width:min(430px,100%)
}

.login-card{
background:rgba(255,255,255,.96);
border:1px solid var(--c-border);
border-radius:24px;
padding:28px;
box-shadow:var(--c-shadow-lg)
}

.login-logo{
display:flex;
justify-content:center;
margin-bottom:15px
}

.login-logo img{
max-width:220px;
max-height:90px;
object-fit:contain
}

.login-title{
text-align:center;
margin:0 0 5px;
color:var(--c-primary-dark);
font-size:22px
}

.login-phrase{
text-align:center;
color:var(--c-muted);
font-size:12px;
margin:0 0 20px
}

.login-links{
display:flex;
justify-content:space-between;
gap:12px;
margin-top:14px;
font-size:11px
}

.login-footer{
text-align:center;
margin-top:18px;
font-size:10px;
color:var(--c-muted)
}

.footer{
padding:24px 0 28px;
border-top:1px solid var(--c-border);
background:rgba(255,255,255,.58)
}

.footer-inner{
display:flex;
align-items:center;
justify-content:space-between;
gap:15px;
font-size:10px;
color:var(--c-muted)
}

.footer-note{
margin:0;
color:var(--c-muted);
font-size:10px
}

.footer-links{
display:flex;
align-items:center;
gap:12px
}

.modal{
position:fixed;
inset:0;
z-index:300;
display:none;
align-items:center;
justify-content:center;
padding:22px;
background:rgba(17,32,29,.64);
backdrop-filter:blur(5px)
}

.modal.open{
display:flex
}

.modal-dialog{
width:min(560px,100%);
max-height:calc(100vh - 44px);
overflow:auto;
background:#fff;
border-radius:20px;
border:1px solid var(--c-border);
box-shadow:var(--c-shadow-lg);
padding:22px
}

.modal-header{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:12px;
margin-bottom:17px
}

.modal-title{
margin:0;
color:var(--c-primary-dark);
font-size:18px
}

.modal-close{
width:38px;
height:38px;
border:1px solid var(--c-border);
border-radius:50%;
background:#fff;
cursor:pointer;
font-size:20px;
display:grid;
place-items:center
}

.modal-footer{
display:flex;
justify-content:flex-end;
gap:9px;
margin-top:18px;
padding-top:16px;
border-top:1px solid var(--c-border)
}

.pagination{
display:flex;
align-items:center;
justify-content:center;
gap:6px;
flex-wrap:wrap;
margin-top:20px
}

.pagination a,
.pagination span{
min-width:36px;
height:36px;
padding:0 9px;
border-radius:10px;
display:grid;
place-items:center;
border:1px solid var(--c-border);
background:#fff;
color:var(--c-muted);
font-size:11px
}

.pagination a:hover,
.pagination .active{
background:var(--c-primary);
border-color:var(--c-primary);
color:#fff
}

.tabs{
display:flex;
gap:5px;
overflow:auto;
border-bottom:1px solid var(--c-border);
margin-bottom:18px
}

.tab{
padding:10px 13px;
border:0;
border-bottom:2px solid transparent;
background:transparent;
color:var(--c-muted);
font-size:11px;
font-weight:600;
cursor:pointer;
white-space:nowrap
}

.tab.active,
.tab:hover{
color:var(--c-primary-dark);
border-bottom-color:var(--c-primary)
}

.progress{
height:9px;
border-radius:999px;
background:#e8efed;
overflow:hidden
}

.progress-bar{
height:100%;
border-radius:999px;
background:var(--c-primary);
transition:width .3s ease
}

hr{
border:0;
border-top:1px solid var(--c-border);
margin:20px 0
}

@media(max-width:1024px){
.main-nav a{padding:9px 10px}
.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:820px){
.container{width:min(100% - 24px,1180px)}
.header-inner{min-height:68px}
.menu-toggle{display:grid}

.main-nav{
position:fixed;
top:69px;
left:12px;
right:12px;
display:none;
flex-direction:column;
align-items:stretch;
padding:12px;
background:#fff;
border:1px solid var(--c-border);
border-radius:16px;
box-shadow:var(--c-shadow-lg)
}

.main-nav.open{display:flex}
.main-nav a{width:100%;padding:12px}
.user-card{display:none}
.grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:680px){
.main-content{padding-top:18px}

.page-header,
.card-header,
.footer-inner{
flex-direction:column;
align-items:flex-start
}

.page-actions{width:100%}
.page-actions .btn{flex:1}

.card{
padding:17px;
border-radius:17px
}

.form-grid,
.grid-2,
.grid-3,
.grid-4,
.stats-grid{
grid-template-columns:1fr
}

.form-group.full,
.field.full{
grid-column:auto
}

.btn-mobile-block{width:100%}
.login-card{padding:22px}
.modal{padding:12px}
.modal-dialog{padding:18px}
.footer-links{flex-wrap:wrap}
}

@media(max-width:420px){
.container{width:min(100% - 18px,1180px)}
.brand-logo{width:40px;height:40px}
.brand-subtitle{display:none}
.card{padding:15px}
.page-actions{display:grid;grid-template-columns:1fr}
.btn{width:100%}

.table-actions .btn,
.btn-icon,
.btn-sm{
width:auto
}

.login-page{padding:14px}

.login-card{
padding:19px;
border-radius:20px
}
}