/* business.css - load AFTER main.css. Pure overrides; no ids/classes renamed. */
:root{
  --navy:#0f2a43; --navy-2:#173a5c; --accent:#1f7a8c; --accent-hover:#16606f;
  --bg:#f4f6f9; --card:#fff; --text:#1c2733; --muted:#5d6b7a; --line:#dde3ea;
  --danger:#c0392b; --radius:8px; --shadow:0 4px 16px rgba(15,42,67,.08);
}
body{
  font-family:Inter,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:14px; color:var(--text); background:var(--bg); margin:0;
}

/* ---------- Login / register ---------- */
#logincontainer{
  display:flex; min-height:100vh; background:var(--bg);
}
.brand-panel{
  flex:1.1; display:flex; flex-direction:column; justify-content:center;
  padding:60px 8%; color:#fff;
  background:linear-gradient(145deg,var(--navy) 0%,var(--navy-2) 100%);
}
.brand-panel .brand{font-size:15px;letter-spacing:.14em;text-transform:uppercase;opacity:.75;margin-bottom:28px}
.brand-panel h1{font-size:38px;line-height:1.15;margin:0 0 16px;font-weight:700}
.brand-panel p{font-size:16px;line-height:1.6;opacity:.85;max-width:480px;margin:0 0 32px}
.brand-panel ul{list-style:none;padding:0;margin:0}
.brand-panel li{padding:8px 0 8px 28px;position:relative;opacity:.9}
.brand-panel li:before{content:"";position:absolute;left:0;top:14px;width:12px;height:12px;border-radius:50%;background:var(--accent)}

#loginformcontainer{
  position:static; margin:auto; width:100%; max-width:400px; height:auto; min-height:0;
  padding:36px; border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); background:var(--card);
}
#loginformcontainer h2{margin:0 0 6px;font-size:22px;color:var(--navy)}
#loginformcontainer .subtitle{margin:0 0 24px;color:var(--muted)}
#login{padding:0}
#loginlogo{background:none;margin:0}
#emailrow label,#responserow label{display:block;font-weight:600;margin-bottom:6px}
#login input[type="text"]{width:100% !important;box-sizing:border-box}
#register{color:var(--muted);font-size:13px;padding:14px 0 6px !important;float:none !important}
span#register[style*="cursor"]{color:var(--accent);font-weight:600;float:none !important;display:block;text-align:center;margin:12px 0 0 !important}
#login .row{margin:0;display:block}
#login .row + .row{margin-top:8px}

/* ---------- Inputs ---------- */
input[type="text"],input[type="email"],input[type="password"],textarea,select{
  border:1px solid var(--line); border-radius:6px; padding:9px 11px;
  font:inherit; color:var(--text); background:#fff; box-sizing:border-box;
}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(31,122,140,.15)}
select{min-width:200px;height:auto}
label{color:var(--muted);font-weight:600}

/* ---------- Buttons (keep class names, unify look) ---------- */
.form-style input[type="submit"],.form-style input[type="button"],.form-style button{
  border-radius:6px; text-transform:none; letter-spacing:.01em; font-weight:600;
  padding:10px 16px; min-width:160px; transition:background .15s,box-shadow .15s;
}
.btn-green,.jconfirm .jconfirm-box .jconfirm-buttons button.btn-green{background:var(--accent);color:#fff}
.btn-green:hover{background:var(--accent-hover);color:#fff}
.btn-yellow,.closeDialogButton,.jconfirm .jconfirm-box .jconfirm-buttons button.btn-yellow{
  background:#e8edf2 !important;color:var(--navy) !important}
.btn-yellow:hover{background:#d8e0e8 !important;color:var(--navy) !important}
.btn-red,.jconfirm .jconfirm-box .jconfirm-buttons button.btn-red{background:var(--danger);color:#fff}
.btn-red:hover{background:#a33024;color:#fff}

/* ---------- App shell ---------- */
#maincontainer{background:var(--bg);min-height:100vh}
.header{
  height:64px; padding:0 20px; background:var(--navy); display:flex;
  align-items:center; justify-content:space-between; box-shadow:0 2px 8px rgba(0,0,0,.15);
}
.header span{float:none !important;padding:0 !important}
#faq{margin-left:auto;margin-right:10px}
#logoimg{width:110px;border-radius:4px}
#logoutimg,#profileimg,#faqimg{width:34px;filter:invert(1) brightness(1.8);opacity:.85}
img:hover{background:none}
#logoutimg:hover,#profileimg:hover,#faqimg:hover{opacity:1}
#header{height:auto}

/* ---------- Tabs ---------- */
.ui-tabs{border:0;background:transparent;padding:16px 20px}
.ui-tabs .ui-tabs-nav{background:transparent;border:0;border-bottom:2px solid var(--line);border-radius:0;padding:0}
.ui-tabs .ui-tabs-nav li{border:0;background:transparent;margin:0 4px -2px 0}
.ui-tabs .ui-tabs-nav li a{padding:10px 18px;color:var(--muted);font-weight:600}
.ui-tabs .ui-tabs-nav li.ui-tabs-active{border-bottom:2px solid var(--accent);background:transparent}
.ui-tabs .ui-tabs-nav li.ui-tabs-active a{color:var(--navy)}
.ui-tabs .ui-tabs-panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);margin-top:16px;padding:20px}

/* ---------- Calendar & table ---------- */
.fc .fc-toolbar-title{color:var(--navy);font-size:22px}
.fc .fc-button-primary{background:var(--navy);border-color:var(--navy)}
.fc .fc-button-primary:hover{background:var(--navy-2)}
.fc-theme-standard td,.fc-theme-standard th,.fc-theme-standard .fc-scrollgrid{border-color:var(--line)}
.fc-event{border-radius:4px}
table.dataTable thead th{background:#f0f3f7;color:var(--navy);border-bottom:1px solid var(--line)}
table.dataTable tbody tr:hover{background:#f7fafc}

/* ---------- Dialogs ---------- */
.ui-dialog{border:0;border-radius:var(--radius);box-shadow:0 12px 40px rgba(15,42,67,.25);padding:0;overflow:hidden}
.ui-dialog .ui-dialog-titlebar{background:var(--navy);color:#fff;border:0;border-radius:0;padding:14px 18px}
.ui-dialog .ui-dialog-content{padding:18px}
.ui-widget-overlay{background:#0f2a43;opacity:.55}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  #logincontainer{flex-direction:column}
  .brand-panel{padding:36px 24px;flex:none}
  .brand-panel h1{font-size:28px}
  #loginformcontainer{margin:24px auto;width:calc(100% - 32px)}
}

/* =====================================================
   Polish layer: more attractive
   ===================================================== */
:root{
  --accent:#14a3a8; --accent-hover:#0f8a8f; --gold:#f2b84b;
  --grad:linear-gradient(135deg,#14a3a8 0%,#1f7a8c 55%,#173a5c 100%);
  --shadow-lg:0 20px 50px rgba(15,42,67,.18);
}
body{-webkit-font-smoothing:antialiased;letter-spacing:.005em}

/* --- Hero panel: photo + navy overlay + soft glow --- */
.brand-panel{
  position:relative; overflow:hidden;
  background:
    linear-gradient(160deg,rgba(15,42,67,.93) 0%,rgba(23,58,92,.82) 60%,rgba(20,163,168,.55) 100%),
    url('../assets/img/winter.jpg') center/cover no-repeat;
}
.brand-panel:before,.brand-panel:after{
  content:""; position:absolute; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle,rgba(20,163,168,.45),transparent 70%);
}
.brand-panel:before{width:420px;height:420px;top:-140px;right:-120px}
.brand-panel:after{width:300px;height:300px;bottom:-110px;left:-80px;opacity:.7}
.brand-panel > *{position:relative;z-index:1;animation:rise .7s ease both}
.brand-panel h1{animation-delay:.08s;background:linear-gradient(90deg,#fff,#cfeff0);-webkit-background-clip:text;background-clip:text;color:transparent}
.brand-panel p{animation-delay:.16s}
.brand-panel ul{animation-delay:.24s}
.brand-panel .brand{display:inline-block;align-self:flex-start;padding:6px 14px;border:1px solid rgba(255,255,255,.3);border-radius:999px;background:rgba(255,255,255,.08);backdrop-filter:blur(6px);opacity:1}
.brand-panel li{font-size:15px}
.brand-panel li:before{width:18px;height:18px;top:9px;background:var(--grad);box-shadow:0 0 0 4px rgba(20,163,168,.2)}
.brand-panel li:after{content:"";position:absolute;left:6px;top:14px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) translate(-1px,-1px)}

/* --- Login card --- */
#logincontainer{background:linear-gradient(180deg,#eef3f8,#f8fafc)}
#loginformcontainer{
  border:0; border-radius:16px; box-shadow:var(--shadow-lg);
  border-top:4px solid transparent; border-image:var(--grad) 1;
  animation:rise .6s .1s ease both;
}
#loginformcontainer h2{font-size:26px;letter-spacing:-.01em}
#login input[type="text"]{padding:12px 14px;border-radius:10px;background:#f7f9fb}
#login input[type="text"]:focus{background:#fff}

/* --- Buttons: gradient + lift --- */
.form-style input[type="submit"].btn-green,.btn-green{
  background:var(--grad); color:#fff; border-radius:10px;
  box-shadow:0 6px 16px rgba(20,163,168,.35);
}
.btn-green:hover{background:var(--grad);filter:brightness(1.08);transform:translateY(-1px);box-shadow:0 10px 22px rgba(20,163,168,.4)}
.btn-green:active{transform:translateY(0)}
.form-style input[type="submit"],.form-style input[type="button"]{transition:transform .15s,box-shadow .15s,filter .15s}
#try_login{padding:13px 16px !important;font-size:15px}
span#register[style*="cursor"]:hover{text-decoration:underline}

/* --- Header --- */
.header{background:linear-gradient(90deg,var(--navy),var(--navy-2));border-bottom:3px solid var(--accent)}
#logoimg{background:#fff;padding:4px 8px;border-radius:8px}
#logoutimg,#profileimg,#faqimg{transition:transform .15s,opacity .15s}
#logoutimg:hover,#profileimg:hover,#faqimg:hover{transform:scale(1.12)}

/* --- Tabs as pills --- */
.ui-tabs .ui-tabs-nav{border-bottom:0;display:flex;gap:6px}
.ui-tabs .ui-tabs-nav li{margin:0;border-radius:999px;overflow:hidden;transition:background .15s}
.ui-tabs .ui-tabs-nav li:hover{background:#e6edf4}
.ui-tabs .ui-tabs-nav li.ui-tabs-active{background:var(--grad);border-bottom:0}
.ui-tabs .ui-tabs-nav li.ui-tabs-active a{color:#fff}
.ui-tabs .ui-tabs-panel{border:0;border-radius:16px;box-shadow:var(--shadow-lg)}

/* --- Calendar --- */
.fc .fc-toolbar-title{font-weight:700;letter-spacing:-.01em}
.fc .fc-button-primary{border-radius:8px;background:var(--navy);border:0;transition:background .15s,transform .15s}
.fc .fc-button-primary:hover{background:var(--accent);transform:translateY(-1px)}
.fc .fc-button-primary:not(:disabled).fc-button-active{background:var(--accent)}
.fc-theme-standard .fc-scrollgrid{border-radius:12px;overflow:hidden}
.fc .fc-col-header-cell{background:#f0f4f8;padding:8px 0;color:var(--navy);font-weight:600}
.fc-daygrid-day{transition:background .15s}
.fc-daygrid-day:hover{background:#f2fafa}
.fc-event{box-shadow:0 2px 6px rgba(0,0,0,.18);border:0}

/* --- Tables, dialogs, form rows --- */
table.dataTable{border-radius:12px;overflow:hidden}
table.dataTable tbody tr{transition:background .12s}
.ui-dialog{border-radius:16px;box-shadow:0 24px 60px rgba(15,42,67,.35)}
.ui-dialog .ui-dialog-titlebar{background:linear-gradient(90deg,var(--navy),var(--navy-2));font-weight:600}
.ui-widget-overlay{backdrop-filter:blur(3px)}
input[type="text"],textarea,select{border-radius:8px}
input[type="checkbox"]{accent-color:var(--accent);width:18px;height:18px}
::selection{background:rgba(20,163,168,.25)}

@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}}