/* Full responsive UI stylesheet for Ayasofya System
   Replaces previous styles.css — includes mobile improvements, action dropdowns,
   card-mode tables, spacing and touch-friendly targets.
*/
:root{
  --primary:#004a99;
  --accent:#d35400;
  --muted:#6c757d;
  --bg:#f4f6f8;
  --card:#ffffff;
  --success:#2ecc71;
  --danger:#e74c3c;
  --radius:10px;
  --text: #222;
}

/* Reset & base */
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter, "Segoe UI", Tahoma, Arial, sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}
.container{max-width:1200px;margin:20px auto;padding:16px}

/* NAVBAR */
.navbar{
  background:var(--primary);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 16px;
  gap:12px;
}
.nav-left{display:flex;align-items:center;gap:12px;min-width:0}
.brand{display:flex;align-items:center;gap:12px}
.brand .header-logo{max-height:48px}
.brand .title{font-weight:700}
.nav-actions{display:flex;gap:8px;align-items:center}
.nav-btn{background:transparent;border:1px solid rgba(255,255,255,0.08);color:#fff;padding:8px 10px;border-radius:8px;text-decoration:none;font-weight:600;cursor:pointer;white-space:nowrap}
.nav-btn.active{background:#fff;color:var(--primary)}
.nav-user{font-size:13px;color:rgba(255,255,255,0.95)}

/* Mobile nav toggle */
.nav-toggle{display:none;background:transparent;border:1px solid rgba(255,255,255,0.08);color:#fff;padding:6px 8px;border-radius:6px;cursor:pointer}

/* Cards & form */
.card{background:var(--card);padding:16px;border-radius:var(--radius);box-shadow:0 6px 18px rgba(20,30,60,0.06);margin-bottom:16px}
.input{width:100%;padding:10px;border-radius:8px;border:1px solid #e3e6ea}
.controls{display:flex;gap:8px;flex-wrap:wrap}
.btn{padding:8px 12px;border-radius:8px;border:none;cursor:pointer;font-weight:700}
.btn-primary{background:var(--primary);color:#fff}
.btn-ghost{background:#6c757d;color:#fff}
.btn-print{background:var(--accent);color:#fff}
.btn-success{background:var(--success);color:#fff}
.btn-danger{background:var(--danger);color:#fff}
.small{font-size:13px;color:var(--muted)}

/* Tables - default desktop view */
.table{width:100%;border-collapse:collapse;margin-top:12px}
.table th,.table td{padding:10px;border:1px solid #eef1f4;font-size:13px;vertical-align:middle}
.table th{background:#f7fafc;text-align:left}
.summary-row{font-weight:700;background:#fbfbfb}

/* Make table text wrap */
.table td { word-break: break-word; white-space: normal; }

/* Action group (buttons) */
.action-group { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.action-btn { padding:6px 8px; border-radius:6px; font-weight:600; font-size:13px; }

/* Dropdown menu for action groups (created by JS when needed) */
.action-dropdown { position:relative; display:inline-block; }
.action-dropdown .menu {
  display:none;
  position:absolute;
  right:0;
  top:calc(100% + 6px);
  background:#fff;
  border:1px solid #e6e9ee;
  box-shadow:0 8px 20px rgba(20,30,60,0.08);
  border-radius:8px;
  min-width:180px;
  z-index:50;
}
.action-dropdown .menu.show { display:block; }
.action-dropdown .menu a,
.action-dropdown .menu button {
  display:block;
  padding:10px 12px;
  background:transparent;
  border:none;
  text-align:left;
  width:100%;
  color:#222;
  text-decoration:none;
  font-size:14px;
}

/* Responsive behaviors */

/* small screens: stack nav and hide nav-actions until toggled */
@media (max-width:900px){
  .nav-actions{display:none;flex-direction:column;width:100%;gap:6px}
  .nav-actions.show{display:flex}
  .nav-toggle{display:inline-flex}
  .nav-btn{width:100%;text-align:left;padding-left:12px}
  .nav-user{padding-left:12px}

  /* make action buttons comfortable on touch */
  .action-group .action-btn{min-width:44px;padding:10px 12px;font-size:14px}
  .action-group { gap:8px; }

  /* table -> cards */
  .table-responsive table, .table-responsive thead, .table-responsive tbody, .table-responsive th, .table-responsive td, .table-responsive tr {
    display:block;
  }
  .table-responsive thead tr { position: absolute; top: -9999px; left: -9999px; }
  .table-responsive tr { margin: 0 0 12px 0; border:1px solid #eee; border-radius:8px; padding:10px; background:#fff; }
  .table-responsive td {
    border: none;
    position: relative;
    padding-left: 50%;
    white-space: normal;
    text-align: left;
  }
  .table-responsive td::before {
    position: absolute;
    top: 10px;
    left: 12px;
    width: 42%;
    padding-right: 10px;
    white-space: nowrap;
    font-weight:700;
    color:#444;
    content: attr(data-label);
  }
}

/* very small devices tweaks */
@media (max-width:480px){
  .container{padding:10px}
  .card{padding:12px;border-radius:8px}
  .nav-btn{padding:8px 10px;font-size:14px}
  .brand .header-logo{max-height:40px}
}

/* print rules */
@media print{
  .nav-actions, .nav-toggle, .navbar { display:none !important; }
  .card { box-shadow:none; border-radius:0; }
}

/* small helpers */
.break-word { word-break:break-word; overflow-wrap:break-word; }
.hidden { display:none !important; }