/* app.css — extracted from dashboard.html */
  :root{
    --bg:#f5f6f8;
    --card:#ffffff;
    --border:#eef0f3;
    --text:#1b2028;
    --muted:#8a92a3;
    --primary:#2b3a67;
    --blue:#3b6cf6;
    --green:#22c55e;
    --amber:#f5a524;
    --purple:#8b7cf6;
    --sidebar-w:280px;
  }
  *{font-family:'Inter',sans-serif;}
  body{background:var(--bg); color:var(--text);}

  /* Sidebar */
  .sidebar{
    width:var(--sidebar-w);
    background:#fff;
    border-right:1px solid var(--border);
    min-height:100vh;
    position:fixed;
    top:0; left:0;
    display:flex;
    flex-direction:column;
    padding:22px 18px;
    transition:transform .25s ease, width .25s ease;
    z-index:1000;
  }
  .sidebar.collapsed{
    transform:translateX(-100%);
  }
  body.sidebar-collapsed .main{
    margin-left:0;
  }
  .brand{display:flex; align-items:center; gap:12px; padding:4px 6px 26px 6px;}
  .brand-logo{
    width:40px; height:40px; border-radius:10px;
    background:linear-gradient(135deg,#2b3a67,#4a5a8f);
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-weight:800; font-size:18px;
  }
  .brand-name{font-weight:700; font-size:15px; line-height:1.2; color:var(--text);}
  .brand-sub{font-size:12px; color:var(--muted);}
  .version-badge{
    font-size:10.5px; font-weight:700; color:#3b52d6; background:#e9edff;
    padding:2px 7px; border-radius:20px; margin-left:6px; vertical-align:middle;
  }

  .nav-link-item{
    display:flex; align-items:center; gap:12px;
    padding:10px 12px; border-radius:10px;
    color:#5b6472; font-size:14.5px; font-weight:500;
    text-decoration:none; margin-bottom:2px;
    transition:.15s;
  }
  .nav-link-item svg{flex:0 0 auto; opacity:.75;}
  .nav-link-item:hover{background:#f4f5f8; color:var(--text);}
  .nav-link-item.active{background:#eef2ff; color:#3b52d6; font-weight:600;}
  .nav-link-item.active svg{opacity:1;}
  .nav-link-item.active svg path, .nav-link-item.active svg circle, .nav-link-item.active svg rect{stroke:#3b52d6;}

  .help-card{
    margin-top:auto;
    background:#eaf1ff;
    border-radius:16px;
    padding:22px;
  }
  .help-title-row{display:flex; align-items:center; gap:10px; margin-bottom:14px;}
  .help-title-row h6{font-size:15px; font-weight:700; color:#3b52d6; margin:0;}
  .help-card p{font-size:13.5px; color:#5b6472; margin-bottom:18px; line-height:1.5;}
  .btn-help{
    background:#fff; border:1px solid #d7e2fb; border-radius:9px;
    padding:9px 0; width:100%; font-size:14px; font-weight:600; color:#3b6cf6;
  }

  /* Main */
  .main{ margin-left:var(--sidebar-w); padding:0 32px 40px; transition:margin-left .25s ease; }

  .topbar{
    display:flex; align-items:center; gap:18px;
    background:#fff; border-bottom:1px solid var(--border);
    margin:0 -32px 30px; padding:18px 32px;
  }
  .search-box{
    flex:1; max-width:640px;
    background:#fff; border:1px solid var(--border); border-radius:10px;
    display:flex; align-items:center; gap:10px; padding:10px 16px;
  }
  .search-box input{border:none; outline:none; flex:1; font-size:14px; background:transparent;}
  .plain-icon-btn{
    width:24px; height:24px; display:flex; align-items:center; justify-content:center;
    background:none; border:none; padding:0; flex:0 0 auto;
  }
  .bell-wrap{position:relative; display:flex; align-items:center; justify-content:center;}
  .badge-dot{
    position:absolute; top:-6px; right:-7px; background:#3b6cf6; color:#fff;
    font-size:10px; font-weight:700; width:16px; height:16px; border-radius:50%;
    display:flex; align-items:center; justify-content:center; border:2px solid #fff;
  }
  .user-chip{display:flex; align-items:center; gap:10px; cursor:pointer; position:relative;}
  .avatar{
    width:38px; height:38px; border-radius:50%; background:#e9edff; color:#3b52d6;
    display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px;
  }
  .user-name{font-size:14px; font-weight:600; line-height:1.2;}
  .user-role{font-size:12px; color:var(--muted);}

  .user-menu{
    position:absolute; top:calc(100% + 10px); right:0;
    background:#fff; border:1px solid var(--border); border-radius:12px;
    box-shadow:0 12px 32px rgba(20,25,40,.12);
    width:200px; padding:8px; z-index:1100;
    display:none;
  }
  .user-menu.open{display:block;}
  .user-menu-item{
    display:flex; align-items:center; gap:10px;
    padding:9px 10px; border-radius:8px; font-size:13.5px; font-weight:500; color:#374151;
    text-decoration:none; cursor:pointer;
  }
  .user-menu-item:hover{background:#f4f5f8;}
  .user-menu-item.danger{color:#dc2626;}
  .user-menu-divider{height:1px; background:var(--border); margin:6px 4px;}

  /* Notifications drawer */
  .notif-overlay{
    position:fixed; inset:0; background:rgba(15,18,28,.35);
    opacity:0; pointer-events:none; transition:opacity .25s ease; z-index:1200;
  }
  .notif-overlay.open{opacity:1; pointer-events:auto;}
  .notif-drawer{
    position:fixed; top:0; right:0; height:100vh; width:380px; max-width:90vw;
    background:#fff; box-shadow:-8px 0 32px rgba(20,25,40,.14);
    transform:translateX(100%); transition:transform .28s ease;
    z-index:1201; display:flex; flex-direction:column;
  }
  .notif-drawer.open{transform:translateX(0);}
  .notif-head{
    display:flex; align-items:center; justify-content:space-between;
    padding:20px 22px; border-bottom:1px solid var(--border);
  }
  .notif-head h5{font-size:17px; font-weight:700; margin:0;}
  .notif-close{background:none; border:none; padding:6px; border-radius:8px; display:flex;}
  .notif-close:hover{background:#f4f5f8;}
  .notif-list{flex:1; overflow-y:auto; padding:8px 12px;}
  .notif-item{
    display:flex; gap:12px; padding:14px 10px; border-radius:10px; position:relative;
  }
  .notif-item:hover{background:#f8f9fb;}
  .notif-item + .notif-item{border-top:1px solid var(--border);}
  .notif-ic{
    width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex:0 0 auto;
  }
  .notif-body{flex:1; min-width:0;}
  .notif-title{font-size:13.5px; font-weight:600; margin-bottom:2px;}
  .notif-desc{font-size:12.5px; color:var(--muted); line-height:1.4;}
  .notif-time{font-size:11.5px; color:#a8adb8; margin-top:5px;}
  .notif-unread-dot{
    width:8px; height:8px; border-radius:50%; background:#3b6cf6; flex:0 0 auto; margin-top:6px;
  }
  .notif-foot{padding:14px 22px; border-top:1px solid var(--border); text-align:center;}

  /* ---- Notifications page (full list) ---- */
  .notif-filter-tabs{display:flex; gap:6px; background:#f4f5f8; border-radius:10px; padding:4px;}
  .notif-filter-tab{border:none; background:none; padding:7px 16px; border-radius:8px; font-size:13px; font-weight:600; color:var(--muted); cursor:pointer; transition:.15s;}
  .notif-filter-tab.active{background:#fff; color:#1b2028; box-shadow:0 1px 3px rgba(16,24,40,.08);}
  .notif-page-item{display:flex; align-items:flex-start; gap:14px; padding:16px 4px; border-bottom:1px solid var(--border); position:relative;}
  .notif-page-item:last-child{border-bottom:none;}
  .notif-page-item.is-unread{background:#f8f9ff; margin:0 -16px; padding:16px; border-radius:10px;}
  .notif-page-item.is-unread + .notif-page-item.is-unread{margin-top:2px;}
  .notif-page-ic{width:42px; height:42px; border-radius:11px; display:flex; align-items:center; justify-content:center; flex:0 0 auto;}
  .notif-page-body{flex:1; min-width:0;}
  .notif-page-title{font-size:14.5px; font-weight:700; margin-bottom:3px;}
  .notif-page-desc{font-size:13px; color:var(--muted); line-height:1.5; margin-bottom:6px;}
  .notif-page-time{font-size:12px; color:#a8adb8;}
  .notif-page-actions{display:flex; align-items:center; gap:10px; flex:0 0 auto;}
  .notif-mark-read{border:1px solid var(--border); background:#fff; border-radius:8px; padding:6px; display:flex; cursor:pointer;}
  .notif-mark-read:hover{background:#f4f5f8;}
  .notif-page-item .notif-unread-dot{position:static; width:8px; height:8px; border-radius:50%; background:#3b6cf6; flex:0 0 auto; margin-top:6px;}
  .notif-empty{text-align:center; padding:60px 20px; color:var(--muted);}
  .notif-empty svg{opacity:.35; margin-bottom:12px;}

  .page-head{display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:26px; flex-wrap:wrap; gap:14px;}
  .page-title{font-size:26px; font-weight:800; margin-bottom:6px;}
  .page-sub{color:var(--muted); font-size:14.5px;}
  .date-range{
    background:#fff; border:1px solid var(--border); border-radius:10px;
    padding:0; display:flex; align-items:center; gap:10px; font-size:14px; font-weight:500;
    position:relative; cursor:pointer;
  }
  .date-range select{
    appearance:none; -webkit-appearance:none; -moz-appearance:none;
    border:none; background:transparent; outline:none;
    padding:10px 34px 10px 16px; font-size:14px; font-weight:500; color:var(--text);
    cursor:pointer;
  }
  .date-range svg.cal-icon{position:absolute; left:16px; top:50%; transform:translateY(-50%); pointer-events:none;}
  .date-range select{padding-left:40px;}
  .date-range svg.chev-icon{position:absolute; right:14px; top:50%; transform:translateY(-50%); pointer-events:none;}

  .stat-card{
    background:#fff; border:1px solid var(--border); border-radius:16px; padding:20px;
    height:100%;
  }
  .stat-icon{
    width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center; margin-bottom:14px;
  }
  .stat-label{font-size:13.5px; color:var(--muted); margin-bottom:6px;}
  .stat-value{font-size:26px; font-weight:800; margin-bottom:8px;}
  .stat-delta{font-size:12.5px; font-weight:600;}
  .up{color:#16a34a;} .down{color:#dc2626;}

  .panel{
    background:#fff; border:1px solid var(--border); border-radius:16px; padding:20px; height:100%;
  }
  .panel-compact{padding:18px;}
  .panel-title{font-size:16px; font-weight:700; margin-bottom:18px;}

  .legend-row{display:flex; align-items:center; justify-content:space-between; padding:8px 0;}
  .legend-dot{width:9px; height:9px; border-radius:50%; display:inline-block; margin-right:10px;}
  .legend-label{font-size:13.5px; color:#4b5563;}
  .legend-count{font-size:13.5px; font-weight:600; width:32px; display:inline-block; text-align:right;}
  .legend-pct{font-size:13.5px; color:var(--muted); width:48px; display:inline-block; text-align:right;}

  .req-item{display:flex; align-items:center; gap:14px; padding:12px 0; border-bottom:1px solid var(--border);}
  .req-item:last-child{border-bottom:none;}
  .req-icon{width:40px; height:40px; border-radius:10px; background:#eef2ff; display:flex; align-items:center; justify-content:center; flex:0 0 auto;}
  .req-title{font-size:14px; font-weight:600; margin-bottom:2px;}
  .req-sub{font-size:12.5px; color:var(--muted);}
  .req-date{font-size:12.5px; color:var(--muted); white-space:nowrap;}
  .status-pill{
    font-size:11.5px; font-weight:700; padding:4px 10px; border-radius:20px; white-space:nowrap;
  }
  .pill-new{background:#dcfce7; color:#16a34a;}
  .pill-progress{background:#dbeafe; color:#2563eb;}
  .pill-wait{background:#fef3c7; color:#d97706;}
  .pill-done{background:#dcfce7; color:#16a34a;}

  .view-all{font-size:13.5px; font-weight:600; color:#3b52d6; text-decoration:none;}

  .type-card{display:flex; align-items:center; gap:16px;}
  .type-icon{width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex:0 0 auto;}
  .type-value{font-size:26px; font-weight:800; line-height:1.3; margin-bottom:2px;}
  .type-label{font-size:14px; color:#5b6472; margin-bottom:4px;}
  .type-pct{font-size:13px; color:var(--muted);}

  select.form-select-sm{font-size:13px; border-radius:8px;}

  /* ===== Settings page ===== */
  .settings-layout{display:flex; align-items:flex-start; gap:20px;}
  .settings-tabs{
    width:230px; flex:0 0 auto; background:#fff; border:1px solid var(--border);
    border-radius:16px; padding:10px;
  }
  .settings-tab{
    display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:10px;
    color:#5b6472; font-size:14.5px; font-weight:500; text-decoration:none; margin-bottom:2px;
    transition:.15s;
  }
  .settings-tab svg{flex:0 0 auto; opacity:.75;}
  .settings-tab:hover{background:#f4f5f8; color:var(--text);}
  .settings-tab.active{background:#eef2ff; color:#3b52d6; font-weight:600;}
  .settings-tab.active svg{opacity:1;}
  .settings-tab.active svg path, .settings-tab.active svg circle, .settings-tab.active svg rect{stroke:#3b52d6;}

  .settings-content{flex:1; min-width:0;}
  .settings-panel-head{display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:20px; gap:14px; flex-wrap:wrap;}
  .settings-panel-title{font-size:19px; font-weight:800; margin-bottom:4px;}
  .settings-panel-sub{font-size:13.5px; color:var(--muted);}

  .settings-card{
    background:#fff; border:1px solid var(--border); border-radius:16px; padding:24px; margin-bottom:20px;
  }
  .settings-card-title{font-size:15.5px; font-weight:700; margin-bottom:2px;}
  .settings-card-sub{font-size:13px; color:var(--muted); margin-bottom:20px;}

  .avatar-upload{
    width:96px; height:96px; border-radius:50%; background:#e9edff; color:#3b52d6;
    display:flex; align-items:center; justify-content:center; font-weight:700; font-size:30px;
    position:relative; margin:0 auto 14px;
  }
  .avatar-upload .camera-btn{
    position:absolute; bottom:0; right:0; width:28px; height:28px; border-radius:50%;
    background:#3b6cf6; border:3px solid #fff; display:flex; align-items:center; justify-content:center;
    cursor:pointer;
  }
  .profile-summary{text-align:center; padding-right:0;}
  .profile-summary-name{font-size:17px; font-weight:700; margin-bottom:2px;}
  .profile-summary-role{font-size:13px; color:var(--muted); margin-bottom:16px;}
  .profile-summary-login{font-size:12px; color:var(--muted); line-height:1.5;}

  .form-label-sm{font-size:13px; font-weight:600; color:#374151; margin-bottom:6px; display:block;}
  .form-control-custom{
    width:100%; border:1px solid var(--border); border-radius:10px; padding:10px 14px;
    font-size:14px; color:var(--text); background:#fff; outline:none; transition:.15s;
  }
  .form-control-custom:focus{border-color:#3b6cf6; box-shadow:0 0 0 3px rgba(59,108,246,.12);}

  .input-icon-wrap{position:relative;}
  .input-icon-wrap .form-control-custom{padding-right:42px;}
  .input-icon-wrap .input-icon-btn{
    position:absolute; right:12px; top:50%; transform:translateY(-50%);
    background:none; border:none; padding:0; display:flex; color:var(--muted);
  }

  .btn-primary-custom{
    background:#3b6cf6; border:none; color:#fff; font-size:14px; font-weight:600;
    padding:10px 20px; border-radius:10px; transition:.15s;
  }
  .btn-primary-custom:hover{background:#2f5be0; color:#fff;}
  .btn-primary-custom:disabled{background:#c7d2e8; cursor:not-allowed;}

  .btn-outline-custom{
    background:#fff; border:1px solid var(--border); color:#374151; font-size:14px; font-weight:600;
    padding:9px 18px; border-radius:10px; transition:.15s; display:inline-flex; align-items:center; gap:8px;
  }
  .btn-outline-custom:hover{background:#f4f5f8; color:#374151;}

  .btn-outline-danger-custom{
    background:#fff; border:1px solid #fecaca; color:#dc2626; font-size:13px; font-weight:600;
    padding:8px 14px; border-radius:8px; white-space:nowrap;
  }
  .btn-outline-danger-custom:hover{background:#fef2f2;}

  .sessions-table{width:100%; border-collapse:collapse;}
  .sessions-table th{
    text-align:left; font-size:12px; font-weight:600; color:var(--muted); text-transform:none;
    padding:0 10px 10px; border-bottom:1px solid var(--border);
  }
  .sessions-table td{
    padding:16px 10px; font-size:13.5px; color:var(--text); border-bottom:1px solid var(--border); vertical-align:middle;
  }
  .sessions-table tr:last-child td{border-bottom:none;}
  .device-cell{display:flex; align-items:center; gap:10px;}
  .device-icon-wrap{
    width:36px; height:36px; border-radius:10px; background:#f4f5f8; display:flex;
    align-items:center; justify-content:center; flex:0 0 auto;
  }
  .device-name{font-weight:600; font-size:13.5px;}
  .device-sub{font-size:12px; color:var(--muted);}
  .badge-session-current{
    font-size:11.5px; font-weight:700; color:#16a34a; background:#dcfce7;
    padding:4px 10px; border-radius:20px; white-space:nowrap; margin-left:8px;
  }
  .settings-info-note{
    display:flex; align-items:center; gap:10px; font-size:12.5px; color:var(--muted);
    padding:14px 4px 0;
  }

  @media (max-width: 900px){
    .settings-layout{flex-direction:column;}
    .settings-tabs{width:100%; display:flex; overflow-x:auto; gap:4px;}
    .settings-tab{white-space:nowrap;}
  }

  /* ===== Roles page ===== */
  .role-card{
    background:#fff; border:1px solid var(--border); border-radius:16px; padding:22px;
    height:100%; display:flex; flex-direction:column;
  }
  .role-card-head{display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:10px;}
  .role-icon{width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; flex:0 0 auto;}
  .role-name{font-size:15.5px; font-weight:700; margin-bottom:2px;}
  .role-desc{font-size:13px; color:var(--muted); line-height:1.5; margin-bottom:16px; flex-grow:1;}
  .role-meta{display:flex; align-items:center; justify-content:space-between; font-size:12.5px; color:var(--muted); border-top:1px solid var(--border); padding-top:14px;}
  .role-users-count{font-weight:600; color:var(--text);}
  .role-perm-list{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:16px;}
  .role-perm-chip{
    font-size:11.5px; font-weight:600; color:#4b5563; background:#f4f5f8;
    padding:4px 10px; border-radius:20px;
  }
  .add-role-card{
    border:1.5px dashed var(--border); border-radius:16px; height:100%;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:10px; color:var(--muted); min-height:220px; cursor:pointer; background:#fbfbfc;
    transition:.15s;
  }
  .add-role-card:hover{border-color:#3b6cf6; color:#3b6cf6; background:#f7f9ff;}
  .add-role-icon{
    width:44px; height:44px; border-radius:50%; background:#eef2ff; color:#3b52d6;
    display:flex; align-items:center; justify-content:center;
  }

  /* ===== Company page ===== */
  .company-logo-box{
    width:88px; height:88px; border-radius:16px; background:#eef2ff; color:#3b52d6;
    display:flex; align-items:center; justify-content:center; font-weight:800; font-size:28px;
    flex:0 0 auto;
  }

  /* ===== Collapsible sidebar nav group (Ρυθμίσεις) ===== */
  .nav-group-toggle{
    width:100%; border:none; background:none; cursor:pointer;
  }
  .nav-group-chevron{transition:transform .2s ease; flex:0 0 auto;}
  .nav-group-toggle.open .nav-group-chevron{transform:rotate(180deg);}

  .nav-submenu{
    display:grid;
    grid-template-rows:0fr;
    overflow:hidden;
    transition:grid-template-rows .22s ease;
  }
  .nav-submenu.open{grid-template-rows:1fr;}
  .nav-submenu-inner{overflow:hidden; padding-top:2px;}

  .nav-sublink{
    display:flex; align-items:center; gap:10px;
    padding:9px 12px 9px 34px; border-radius:10px;
    color:#7c8494; font-size:13.5px; font-weight:500;
    text-decoration:none; margin-bottom:2px;
    transition:.15s;
  }
  .nav-sublink:hover{background:#f4f5f8; color:var(--text);}
  .nav-sublink.active{background:#eef2ff; color:#3b52d6; font-weight:600;}
  .nav-sublink.active svg path, .nav-sublink.active svg circle, .nav-sublink.active svg rect{stroke:#3b52d6;}

  /* ===== List pagination bar (Πελάτες / Αιτήσεις / Ειδοποιήσεις) ===== */
  .pagination-bar{
    display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
    gap:12px; padding:14px 2px 2px; margin-top:10px; border-top:1px solid #eef0f4;
  }
  .pagination-info{font-size:13px; color:#8a92a3;}
  .pagination-controls{display:flex; align-items:center; gap:18px; flex-wrap:wrap;}
  .page-size-select{display:flex; align-items:center; gap:8px; font-size:13px; color:#5b6472; white-space:nowrap;}
  .page-size-select select{
    width:auto; padding:5px 28px 5px 10px; font-size:13px; border-radius:8px;
    border:1px solid #e5e7eb; background:#fff; color:var(--text); cursor:pointer;
  }
  .pagination-pages{display:flex; align-items:center; gap:4px;}
  .pagination-pages button{
    min-width:30px; height:30px; padding:0 8px; border:1px solid #e5e7eb; background:#fff;
    border-radius:8px; font-size:13px; color:#5b6472; cursor:pointer; transition:.15s;
  }
  .pagination-pages button:hover:not(:disabled){background:#f4f5f8; border-color:#d7dae0;}
  .pagination-pages button.active{background:#3b52d6; border-color:#3b52d6; color:#fff;}
  .pagination-pages button:disabled{opacity:.4; cursor:not-allowed;}
  .pagination-ellipsis{padding:0 4px; color:#9aa1ac; font-size:13px;}