/* =====================================================
   SCF UI SYSTEM
===================================================== */

/* ===== CARDS ===== */

.scf-card{
background:#fafafa;
border:1px solid #dcdcdc;
border-radius:10px;
padding:18px;
margin:0 0 16px;
box-shadow:0 2px 4px rgba(0,0,0,.06);
}

/* ===== FORM ELEMENTS ===== */

.scf-form input[type="text"],
.scf-form input[type="email"],
.scf-form input[type="date"],
.scf-form input[type="time"],
.scf-form input[type="number"],
.scf-form select,
.scf-form textarea,
.scf-staff-detail input[type="text"],
.scf-staff-detail input[type="email"],
.scf-staff-detail input[type="date"],
.scf-staff-detail input[type="time"],
.scf-staff-detail input[type="number"],
.scf-staff-detail select,
.scf-staff-detail textarea,
.scf-customer input[type="text"],
.scf-customer input[type="email"],
.scf-customer input[type="date"],
.scf-customer input[type="time"],
.scf-customer input[type="number"],
.scf-customer select,
.scf-customer textarea{
width:100%;
max-width:100%;
padding:10px 12px;
border:1px solid #d5d5d5;
border-radius:6px;
background:#fff;
color:#222;
font-size:15px;
line-height:1.4;
box-sizing:border-box;
}

.scf-form input:focus,
.scf-form select:focus,
.scf-form textarea:focus,
.scf-staff-detail input:focus,
.scf-staff-detail select:focus,
.scf-staff-detail textarea:focus,
.scf-customer input:focus,
.scf-customer select:focus,
.scf-customer textarea:focus{
border-color:#0b6aa9;
box-shadow:0 0 0 3px rgba(11,106,169,.12);
outline:none;
}

/* =====================================================
   SCF TEXTAREA SYSTEM (Base + Modifier)
===================================================== */

.scf-textarea{
width:100%;
max-width:100%;
padding:10px 12px;

border:1px solid #d5d5d5;
border-radius:6px;

text-align:left;
vertical-align:top;

font-size:15px;
line-height:1.4;
color:#222;

box-sizing:border-box;

height:65px;
min-height:65px;
max-height:65px;

overflow-y:auto;
resize:vertical;

background:#fff;
}

/* editierbare Felder */

.scf-textarea-edit{
background:#fff;
}

/* readonly Felder */

.scf-textarea-readonly{
background:#f6f6f6 !important;
border-color:#d8d8d8;
color:#444;
resize:none;
cursor:default;
}

/* ===== BUTTONS ===== */

.scf-btn{
display:inline-block;
padding:10px 16px;
border-radius:6px;
border:1px solid #d5d5d5;
background:#f3f3f3;
color:#222;
font-weight:600;
font-size:15px;
line-height:1.2;
cursor:pointer;
text-decoration:none;
transition:all .15s ease;
box-sizing:border-box;
}

.scf-btn:hover{
background:#e9e9e9;
border-color:#c8c8c8;
box-shadow:0 1px 3px rgba(0,0,0,.08);
}

.scf-btn:focus{
background:#0b6aa9;
color:#fff;
border-color:#0b6aa9;
outline:none;
box-shadow:0 0 0 3px rgba(11,106,169,.16);
}

.scf-btn-primary{
background:#0b6aa9;
color:#fff;
border-color:#0b6aa9;
}

.scf-btn-primary:hover{
background:#09598e;
border-color:#09598e;
}

.scf-btn-danger{
background:#fff5f5;
color:#b42318;
border-color:#e7b8b8;
}

.scf-btn-danger:hover{
background:#fdeaea;
border-color:#d99;
box-shadow:0 1px 3px rgba(180,35,24,.08);
}

.scf-btn-danger:focus{
background:#b42318;
color:#fff;
border-color:#b42318;
outline:none;
box-shadow:0 0 0 3px rgba(180,35,24,.16);
}

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

.scf-btn:active{
transform:translateY(1px);
}

.scf-btn-success{
background:#2e7d32;
border-color:#2e7d32;
color:#fff;
}

.scf-btn-success:hover{
background:#256628;
border-color:#256628;
}

/* ==========================
   Textbaustein Button
========================== */

.scf-textblock-btn{
padding:4px 10px;
font-size:13px;
margin-left:8px;
margin-bottom:6px;
border-radius:6px;
}

/* aktiver Zustand */
.scf-textblock-btn-active{
background:#0b6aa9;
color:#fff;
border-color:#0b6aa9;
}

.scf-textblock-popup{
display:none;
position:absolute;
background:#fff;
border:1px solid #ddd;
border-radius:6px;
box-shadow:0 4px 10px rgba(0,0,0,.08);
width:320px;
max-height:260px;
overflow-y:auto;
z-index:50;
}

.scf-textblock-open{
display:block;
}


/* ===== TABLES ===== */

.scf-table-wrap{
overflow:auto;
}

.scf-table{
width:100%;
border-collapse:collapse;
min-width:880px;
background:#fff;
}

.scf-table th{
text-align:left;
border-bottom:1px solid #ddd;
padding:10px 8px;
white-space:nowrap;
font-size:14px;
color:#333;
background:#fafafa;
}

.scf-table td{
border-bottom:1px solid #eee;
padding:10px 8px;
vertical-align:top;
font-size:14px;
color:#333;
}

/* ===== FILTER BUTTONS ===== */

.scf-filter-bar{
display:flex;
gap:10px;
flex-wrap:wrap;
margin:10px 0 20px;
}

.scf-filter-btn{
display:inline-block;
padding:8px 14px;
border-radius:20px;
border:1px solid #d5d5d5;
background:#f3f3f3;
color:#222;
font-weight:600;
text-decoration:none;
transition:all .15s ease;
}

.scf-filter-btn:hover{
background:#e9e9e9;
border-color:#c8c8c8;
}

.scf-filter-btn-active{
background:#0b6aa9;
border-color:#0b6aa9;
color:#fff;
}

/* ===== STATUS BADGES ===== */

.scf-status-badge{
display:inline-block;
padding:4px 10px;
border-radius:999px;
font-size:13px;
font-weight:700;
}

.scf-status-open{
background:#fff3cd;
color:#856404;
border:1px solid #ffeeba;
}

.scf-status-confirmed{
background:#e6f6ea;
color:#1e7e34;
border:1px solid #b7ebc6;
}

.scf-status-declined{
background:#fdecea;
color:#a71d2a;
border:1px solid #f5c6cb;
}

.scf-status-cancelled{
background:#f1f1f1;
color:#666;
border:1px solid #ddd;
}

.scf-status-warn{
background:#fff3cd;
color:#856404;
border:1px solid #ffeeba;
}

/* ===== MUTED ===== */

.scf-muted{
opacity:.78;
font-size:13px;
color:#555;
}





/* ===== SCF DETAIL ===== */

.scf-staff-detail{
font-size:16px;
line-height:1.5;
}

.scf-staff-detail h2{
font-size:28px;
margin:0;
}

.scf-staff-detail strong{
font-weight:700;
}

.scf-staff-detail textarea{
font-size:15px;
}

/* ===== RESERVATION DATA ===== */

.scf-staff-detail .scf-detail-row,
.scf-customer .scf-detail-row{
font-size:18px;
line-height:1.3;
margin:6px 0;
color:#333;
}

.scf-staff-detail .scf-detail-row strong,
.scf-customer .scf-detail-row strong{
display:inline-block;
width:130px;
font-size:18px;
font-weight:700;
color:#333;
vertical-align:top;
}

/* ===== CUSTOMER MESSAGE ===== */

.scf-customer-note{
margin:18px 0;
}

.scf-customer-note strong{
display:block;
font-size:18px;
margin-bottom:6px;
}

/* ===== DETAIL HEADER LAYOUT ===== */

.scf-staff-detail .scf-header{
display:flex;
align-items:center;
gap:12px;
margin-bottom:12px;
}

.scf-staff-detail .scf-header h2{
margin:0;
font-size:28px;
}

.scf-staff-detail .scf-header .scf-status-badge{
margin-left:12px;
white-space:nowrap;
}

/* ===== SCF TAB NAV ===== */

.scf-staff .scf-tabs{
display:flex;
gap:8px;
flex-wrap:wrap;
margin:0 0 14px;
}

.scf-staff .scf-tab{
padding:8px 10px;
border-radius:999px;
text-decoration:none;
border:1px solid #ccc;
background:#fff;
color:#222;
font-weight:700;
}

.scf-staff .scf-tab.is-active{
background:#0b6aa9;
color:#fff;
border-color:#0b6aa9;
}


/* ===== SMALL TEXT ===== */

.scf-staff .scf-muted{
opacity:.7;
font-size:12px;
}


/* ===== ROW MARKERS ===== */

.scf-staff .scf-row-today{
background:#fff8e6;
}

.scf-staff .scf-row-tomorrow{
background:#f1f7ff;
}


/* ===== SCF ADMIN DASHBOARD ===== */

.scf-dashboard{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:16px;
margin-top:20px;
}

.scf-card h3{
margin-top:0;
margin-bottom:8px;
font-size:18px;
}

.scf-card p{
margin:4px 0;
}

.scf-card .scf-big{
font-size:26px;
font-weight:700;
}

/* Filter Counter */

.scf-filter-count{
margin-left:6px;
font-size:12px;
padding:2px 6px;
border-radius:10px;
background:rgba(0,0,0,.08);
font-weight:600;
}

.scf-filter-btn-active .scf-filter-count{
background:rgba(255,255,255,.25);
color:#fff;
}

/* ===== FILTER STATUS HIGHLIGHTS ===== */

/* offene Reservierungen */

.scf-filter-btn[data-status="open"] .scf-filter-count{
background:#fff3cd;
color:#856404;
}

/* Storno-Anfragen */

.scf-filter-btn[data-status="cancel_requested"] .scf-filter-count{
background:#fdecea;
color:#a71d2a;
}

/* aktiv ausgewählter Filter bleibt blau */

.scf-filter-btn-active[data-status="open"] .scf-filter-count,
.scf-filter-btn-active[data-status="cancel_requested"] .scf-filter-count{
background:rgba(255,255,255,.25);
color:#fff;
}

/* ===== SONSTIGES ===== */

.scf-select{
width:100%;
padding:8px 10px;
margin-bottom:6px;
border:1px solid #d5d5d5;
border-radius:6px;
background:#fff;
font-size:14px;
}