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

:root{
  --black:#000000;
  --blue:#4092B6;
  --blue-dark:#0a2a38;
  --blue-deep:#04161d;
  --teal:#8ECED4;
  --white:#ffffff;

  --bg:#f3f7f9;
  --bg-soft:#eef3f6;
  --card:#ffffff;

  --border:#dce5e8;
  --border-strong:#d7e2e8;
  --input-border:#c9d6dc;

  --text:#1a2a30;
  --text-muted:#6b8088;
  --danger:#c4342d;
  --success:#1d6b43;
  --warning:#a65b00;

  --shadow-sm:0 4px 14px rgba(0,0,0,0.04);
  --shadow-md:0 10px 30px rgba(0,0,0,0.08);
  --shadow-lg:0 18px 50px rgba(10,42,56,0.10);

  --radius-sm:10px;
  --radius-md:16px;
  --radius-lg:22px;
  --radius-xl:28px;

  --font:'DM Sans','Segoe UI',system-ui,sans-serif;
}

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

html{
  scroll-behavior:smooth;
}

body{
  min-height:100vh;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  line-height:1.5;
}

a{
  color:inherit;
}

img{
  max-width:100%;
  display:block;
}

/* =========================
   UTILITY
========================= */

.muted{
  color:var(--text-muted);
  font-size:13px;
}

.no-border{
  border-bottom:none;
  margin-bottom:0;
  padding-bottom:0;
}

.empty-state{
  padding:24px;
  border:1px dashed var(--border);
  border-radius:14px;
  background:#fff;
  color:var(--text-muted);
  font-size:14px;
}

/* =========================
   CARD GENERICHE
========================= */

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}

.card-body{
  padding:28px;
}

.section-title{
  font-size:13px;
  font-weight:700;
  color:var(--blue);
  letter-spacing:.04em;
  text-transform:uppercase;
  margin-bottom:18px;
  padding-bottom:12px;
  border-bottom:1px solid var(--border);
}

/* =========================
   ALERT
========================= */

.alert{
  margin-bottom:18px;
  padding:14px 16px;
  border-radius:16px;
  font-size:14px;
  line-height:1.5;
  border:1px solid transparent;
}

.alert-error{
  background:#fff2f2;
  border-color:#efc5c5;
  color:var(--danger);
}

/* =========================
   BOTTONI
========================= */

.btn{
  width:100%;
  min-height:60px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px 24px;
  border:none;
  border-radius:18px;
  background:linear-gradient(135deg,#000000 0%, #062533 40%, #0d5269 100%);
  color:#fff;
  font-size:21px;
  font-weight:800;
  font-family:var(--font);
  text-decoration:none;
  cursor:pointer;
  transition:all .22s ease;
  box-shadow:0 12px 24px rgba(0,0,0,.14);
}

.btn:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 30px rgba(0,0,0,.18);
}

.btn-secondary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:56px;
  padding:0 28px;
  border-radius:16px;
  border:2px solid var(--border-strong);
  background:#fff;
  color:#20485a;
  font-size:16px;
  font-weight:700;
  text-decoration:none;
  transition:all .18s ease;
}

.btn-secondary:hover{
  border-color:#aac6d2;
  box-shadow:0 8px 18px rgba(10,42,56,.06);
  transform:translateY(-1px);
}

.logout-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:10px 18px;
  border-radius:10px;
  background:#fff;
  color:#1c4b5c;
  text-decoration:none;
  font-size:14px;
  font-weight:700;
  transition:all .2s ease;
}

.logout-btn:hover{
  background:#e6f0f4;
}

/* =========================
   FORM BASE
========================= */

.field{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:0;
  margin-bottom:0;
}

.field label{
  position:absolute;
  top:18px;
  left:18px;
  z-index:2;
  padding:0 6px;
  background:#fff;
  color:#7a8f98;
  font-size:15px;
  line-height:1;
  font-weight:600;
  pointer-events:none;
  transition:all .18s ease;
}

.field input,
.field select,
.field textarea{
  width:100%;
  min-height:58px;
  padding:24px 18px 10px;
  border:2px solid var(--border-strong);
  border-radius:16px;
  background:#fff;
  color:#0f2d38;
  font-family:var(--font);
  font-size:17px;
  outline:none;
  transition:all .18s ease;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.02);
}

.field textarea{
  min-height:120px;
  padding:28px 18px 16px;
  resize:vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus{
  border-color:#3b89a5;
  background:#fff;
  box-shadow:0 0 0 4px rgba(59,137,165,.10);
}

.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,
.field textarea:not(:placeholder-shown) + label,
.field select:focus + label{
  top:-8px;
  left:14px;
  color:#3b89a5;
  font-size:12px;
  font-weight:700;
}

/* =========================
   LOGIN / REGISTER
========================= */

.login-page{
  background:linear-gradient(135deg,#f3f7f9 0%, #e8f0f4 100%);
}

.login-shell{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}

.login-card{
  width:100%;
  max-width:1080px;
  margin:20px auto;
  background:#fff;
  border:1px solid #dfe8ec;
  border-radius:28px;
  overflow:hidden;
  box-shadow:var(--shadow-lg);
}

.login-card-top{
  padding:18px 34px 18px;
  background:linear-gradient(135deg,#04161d 0%, #0d3441 40%, #3a8db2 100%);
  color:#fff;
}

.login-logo{
  width:100%;
  max-width:420px;
  height:auto;
  display:block;
  margin:0 auto 12px;
}

.login-card-top h1{
  margin:0 0 6px;
  font-size:28px;
  line-height:1.1;
  font-weight:800;
  color:#fff;
}

.login-card-top p{
  margin:0;
  font-size:16px;
  line-height:1.4;
  color:rgba(255,255,255,.90);
}

.login-card-body{
  padding:32px 38px 34px;
  background:#fff;
}

.login-actions{
  margin-top:26px;
  text-align:center;
}

/* switch account */
.account-switch{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  margin-bottom:30px;
}

.account-tab{
  border:2px solid var(--border-strong);
  background:#fff;
  color:#183845;
  border-radius:18px;
  padding:18px 20px;
  font-size:19px;
  font-weight:800;
  cursor:pointer;
  transition:all .22s ease;
  box-shadow:0 4px 12px rgba(0,0,0,.03);
}

.account-tab:hover{
  transform:translateY(-2px);
  border-color:#8cb7c8;
  box-shadow:0 8px 18px rgba(10,42,56,.08);
}

.account-tab.active{
  background:linear-gradient(135deg,#0a2a38 0%, #2f7d91 100%);
  color:#fff;
  border-color:transparent;
  box-shadow:0 12px 24px rgba(10,42,56,.18);
}

.form-section{
  display:none;
}

.form-section.active{
  display:block;
}

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

.register-grid .full{
  grid-column:1 / -1;
}

/* =========================
   HEADER AREA UTENTE
========================= */

.header{
  background:linear-gradient(135deg,#04161d 0%, #0d3441 40%, #2a6a7d 100%);
  padding:56px 32px;
  color:#fff;
}

.header-inner{
  max-width:1280px;
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:40px;
}

.header-left{
  flex:1 1 auto;
  min-width:0;
}

.header-badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-bottom:18px;
  color:rgba(255,255,255,.8);
  font-size:13px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.header-badge-icon{
  width:38px;
  height:38px;
  border-radius:10px;
  background:rgba(255,255,255,.08);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
}

.header-left h1{
  margin:0 0 10px;
  color:#fff;
  font-size:46px;
  line-height:1.08;
  font-weight:700;
}

.header-left p{
  margin:0;
  color:rgba(255,255,255,.72);
  font-size:18px;
  line-height:1.45;
}

.header-right{
  flex:0 0 360px;
  max-width:360px;
  text-align:right;
}

.header-logo{
  width:100%;
  max-width:320px;
  height:auto;
  display:block;
  margin:0 0 18px auto;
}

.header-info{
  color:rgba(255,255,255,.72);
  font-size:14px;
  line-height:1.7;
}

.header-info a{
  color:rgba(255,255,255,.72);
  text-decoration:none;
}

.header-info a:hover{
  text-decoration:underline;
}

.header-actions{
  margin-top:20px;
  display:flex;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:10px;
}

.main-wrap{
  max-width:1100px;
  margin:0 auto;
  padding:24px 20px 32px;
}

/* =========================
   TOOLBAR
========================= */

.toolbar{
  display:grid;
  grid-template-columns:minmax(260px,1fr) 260px;
  gap:16px;
  margin-bottom:22px;
}

.toolbar-search,
.toolbar-sort{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.toolbar label{
  font-size:12px;
  font-weight:700;
  color:var(--text-muted);
  text-transform:uppercase;
  letter-spacing:.04em;
}

.toolbar input,
.toolbar select{
  width:100%;
  padding:12px 14px;
  border:1px solid var(--input-border);
  border-radius:10px;
  background:#fff;
  color:var(--text);
  font-size:14px;
  font-family:var(--font);
  outline:none;
}

.toolbar input:focus,
.toolbar select:focus{
  border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(64,146,182,0.12);
}

.results-bar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin-bottom:20px;
}

/* =========================
   CARD FILE FRONTEND
========================= */

.files-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(250px, 1fr));
  gap:18px;
}

.file-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:16px;
  padding:20px;
  transition:transform .15s, box-shadow .15s, border-color .15s;
}

.file-card:hover{
  transform:translateY(-2px);
  border-color:#c9dce2;
  box-shadow:0 8px 20px rgba(0,0,0,.06);
}

.file-name{
  margin-bottom:8px;
  color:var(--text);
  font-size:16px;
  font-weight:700;
  word-break:break-word;
}

.file-meta{
  margin-bottom:16px;
  color:var(--text-muted);
  font-size:12px;
}

.file-link{
  display:inline-block;
  padding:10px 14px;
  border-radius:10px;
  background:rgba(64,146,182,0.08);
  color:var(--blue);
  text-decoration:none;
  font-size:13px;
  font-weight:700;
}

.file-link:hover{
  background:rgba(64,146,182,0.14);
}

/* =========================
   LAYOUT ADMIN
========================= */

.app-body{
  background:var(--bg-soft);
}

.app-layout{
  min-height:100vh;
  display:flex;
}

.sidebar{
  position:sticky;
  top:0;
  width:280px;
  height:100vh;
  padding:24px 18px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  background:linear-gradient(180deg,#061821 0%, #0d2d3b 45%, #163f52 100%);
  color:#fff;
}

.sidebar-top{
  margin-bottom:28px;
}

.sidebar-brand{
  display:flex;
  align-items:center;
  gap:14px;
}

.sidebar-logo{
  width:48px;
  height:48px;
  border-radius:14px;
  background:rgba(255,255,255,0.12);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  flex-shrink:0;
}

.sidebar-kicker{
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.12em;
  opacity:.65;
}

.sidebar-title{
  margin-top:2px;
  font-size:20px;
  font-weight:700;
}

.sidebar-nav{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:10px;
}

.sidebar-link{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border-radius:12px;
  color:rgba(255,255,255,0.88);
  text-decoration:none;
  font-size:14px;
  font-weight:600;
  transition:background .2s, color .2s;
}

.sidebar-link:hover,
.sidebar-link.active{
  background:rgba(255,255,255,0.10);
  color:#fff;
}

.sidebar-footer{
  border-top:1px solid rgba(255,255,255,0.12);
  padding-top:18px;
}

.sidebar-user-label{
  margin-bottom:6px;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.1em;
  opacity:.65;
}

.sidebar-user-name{
  font-size:15px;
  font-weight:700;
}

.sidebar-user-meta{
  margin-top:4px;
  font-size:12px;
  opacity:.7;
}

.app-main{
  flex:1;
  min-width:0;
}

.app-header{
  padding:24px 32px;
  background:linear-gradient(135deg,var(--black) 0%, #0a2a38 40%, var(--blue) 100%);
  color:#fff;
}

/* =========================
   LOGIN PAGE DEDICATA
========================= */

.login-card--narrow{
  max-width:760px;
}

.login-card-top--compact{
  padding:18px 28px 16px;
}

.login-logo--small{
  max-width:320px;
  margin:0 auto 10px;
}

.login-card--narrow .login-card-top h1{
  font-size:26px;
  margin-bottom:4px;
}

.login-card--narrow .login-card-top p{
  font-size:15px;
}

.login-card-body--compact{
  padding:28px 28px 30px;
}

.login-form{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.login-form .field{
  margin-bottom:0;
}

.login-form .field input{
  min-height:62px;
}

.login-btn{
  margin-top:6px;
}

.login-card--narrow .login-actions{
  margin-top:22px;
}

.login-card--narrow .btn-secondary{
  min-width:180px;
}

/* =========================
   UPLOAD PANEL PRO
========================= */

.upload-panel{
  display:flex;
  flex-direction:column;
  gap:22px;
}

.upload-panel-top{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.upload-panel-kicker{
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--blue);
}

.upload-panel-title{
  margin:0;
  font-size:28px;
  line-height:1.1;
  font-weight:800;
  color:var(--text);
}

.upload-panel-text{
  margin:0;
  font-size:15px;
  line-height:1.55;
  color:var(--text-muted);
  max-width:760px;
}

.upload-box{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:18px;
  align-items:center;
  padding:22px;
  border:1px solid var(--border);
  border-radius:20px;
  background:linear-gradient(180deg,#fbfdfe 0%, #f5f9fb 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}

.upload-box-left{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:0;
}

.upload-label{
  font-size:14px;
  font-weight:700;
  color:#58717b;
}

.upload-input-wrap{
  position:relative;
  display:flex;
  align-items:center;
  min-height:64px;
  padding:12px 14px;
  border:2px dashed #c8d6dd;
  border-radius:18px;
  background:#fff;
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.upload-input-wrap:hover{
  border-color:#8fb5c4;
  background:#fcfeff;
  box-shadow:0 8px 18px rgba(10,42,56,.04);
}

.upload-input-wrap:focus-within{
  border-color:var(--blue);
  box-shadow:0 0 0 4px rgba(64,146,182,.10);
  background:#fff;
}

.upload-native-input{
  width:100%;
  font-family:var(--font);
  font-size:15px;
  color:var(--text);
  background:transparent;
  border:none;
  outline:none;
}

.upload-native-input::file-selector-button{
  margin-right:14px;
  padding:10px 16px;
  border:none;
  border-radius:12px;
  background:linear-gradient(135deg,#0a2a38 0%, #2f7d91 100%);
  color:#fff;
  font-family:var(--font);
  font-size:14px;
  font-weight:700;
  cursor:pointer;
  transition:all .18s ease;
}

.upload-native-input::file-selector-button:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 18px rgba(10,42,56,.14);
}

.upload-help{
  font-size:13px;
  color:var(--text-muted);
}

.upload-box-right{
  display:flex;
  align-items:center;
  justify-content:center;
  height:100%;
}

.upload-submit-btn{
  min-width:170px;
  min-height:56px;
  font-size:16px;
  border-radius:14px;
  padding:0 24px;
  align-self:center;
}

/* =========================
   FILE TABLE PRO
========================= */

.file-table-wrap{
  width:100%;
}

.file-table-head{
  display:grid;
  grid-template-columns:minmax(0,2.2fr) 140px 130px 190px 240px;
  gap:16px;
  padding:18px 24px;
  border-bottom:1px solid var(--border);
  background:linear-gradient(180deg,#f9fcfd 0%, #f3f8fa 100%);
  color:#56707a;
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.05em;
}

.file-table-row{
  display:grid;
  grid-template-columns:minmax(0,2.2fr) 140px 130px 190px 240px;
  gap:16px;
  align-items:center;
  padding:20px 24px;
  border-bottom:1px solid #edf3f6;
  transition:background .18s ease, transform .18s ease;
}

.file-table-row:hover{
  background:#fbfdfe;
}

.file-table-row--five{
  grid-template-columns:minmax(0,2.2fr) 140px 130px 190px 240px;
}

.file-col-main{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
}

.file-badge{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:58px;
  height:34px;
  padding:0 14px;
  border-radius:999px;
  background:rgba(64,146,182,0.10);
  color:var(--blue-dark);
  font-size:12px;
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase;
}

.file-main-content{
  min-width:0;
}

.file-main-title{
  font-size:16px;
  line-height:1.35;
  font-weight:800;
  color:var(--text);
  word-break:break-word;
}

.file-main-sub{
  margin-top:4px;
  font-size:13px;
  color:var(--text-muted);
}

.file-col-size,
.file-col-date{
  font-size:14px;
  font-weight:700;
  color:#36515c;
}

.file-col-opens{
  display:flex;
  align-items:center;
}

.file-open-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:52px;
  height:34px;
  padding:0 12px;
  border-radius:999px;
  background:rgba(64,146,182,0.10);
  color:var(--blue-dark);
  font-size:13px;
  font-weight:800;
}

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

.file-action-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:0 14px;
  border-radius:12px;
  font-size:14px;
  font-weight:700;
  text-decoration:none;
  transition:all .18s ease;
  border:1px solid transparent;
}

.file-action-view{
  background:rgba(64,146,182,0.08);
  color:var(--blue-dark);
  border-color:rgba(64,146,182,0.16);
}

.file-action-view:hover{
  background:rgba(64,146,182,0.14);
  transform:translateY(-1px);
}

.file-action-delete{
  background:#fff5f5;
  color:#b33a3a;
  border-color:#efc5c5;
}

.file-action-delete:hover{
  background:#ffecec;
  transform:translateY(-1px);
}

.file-empty-state{
  padding:28px 24px;
  color:var(--text-muted);
  font-size:15px;
}

/* =========================
   TABELLE ADMIN UNIFICATE
========================= */

.users-table-wrap,
.logs-table-wrap,
.filelogs-table-wrap,
.table-responsive{
  width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
}

.users-table-wrap::-webkit-scrollbar,
.logs-table-wrap::-webkit-scrollbar,
.filelogs-table-wrap::-webkit-scrollbar,
.table-responsive::-webkit-scrollbar{
  height:10px;
}

.users-table-wrap::-webkit-scrollbar-thumb,
.logs-table-wrap::-webkit-scrollbar-thumb,
.filelogs-table-wrap::-webkit-scrollbar-thumb,
.table-responsive::-webkit-scrollbar-thumb{
  background:#c9d6dc;
  border-radius:999px;
}

.users-table-wrap::-webkit-scrollbar-track,
.logs-table-wrap::-webkit-scrollbar-track,
.filelogs-table-wrap::-webkit-scrollbar-track,
.table-responsive::-webkit-scrollbar-track{
  background:#eef3f6;
  border-radius:999px;
}

.admin-table,
.users-table,
.logs-table,
.filelogs-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  table-layout:auto;
}

.admin-table thead th,
.users-table thead th,
.logs-table thead th,
.filelogs-table thead th{
  padding:14px 16px;
  text-align:left;
  background:linear-gradient(180deg,#f9fcfd 0%, #f3f8fa 100%);
  border-bottom:1px solid #dce5e8;
  color:#4d6772;
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.05em;
  white-space:nowrap;
}

.admin-table thead th:first-child,
.users-table thead th:first-child,
.logs-table thead th:first-child,
.filelogs-table thead th:first-child{
  border-top-left-radius:14px;
}

.admin-table thead th:last-child,
.users-table thead th:last-child,
.logs-table thead th:last-child,
.filelogs-table thead th:last-child{
  border-top-right-radius:14px;
}

.admin-table tbody td,
.users-table tbody td,
.logs-table tbody td,
.filelogs-table tbody td{
  padding:16px;
  border-bottom:1px solid #edf3f6;
  vertical-align:middle;
  background:#fff;
}

.admin-table tbody tr:hover td,
.users-table tbody tr:hover td,
.logs-table tbody tr:hover td,
.filelogs-table tbody tr:hover td{
  background:#fbfdfe;
}

/* widths and readability */
.users-table{
  min-width:1180px;
}

.logs-table{
  min-width:1120px;
}

.filelogs-table{
  min-width:1240px;
}

.users-cell-main,
.logs-user-main,
.filelogs-user-main,
.filelogs-file-main{
  font-size:15px;
  font-weight:800;
  color:#1a2a30;
  line-height:1.35;
}

.users-cell-sub,
.logs-user-sub,
.filelogs-user-sub,
.filelogs-file-sub{
  margin-top:4px;
  font-size:13px;
  color:#6b8088;
  line-height:1.45;
}

.users-email{
  min-width:220px;
  font-size:14px;
  font-weight:700;
  color:#34525d;
  white-space:normal;
  word-break:break-word;
}

.users-date,
.logs-date,
.filelogs-date{
  min-width:170px;
  white-space:nowrap;
  font-size:14px;
  font-weight:700;
  color:#34525d;
}

.logs-ip,
.filelogs-ip{
  min-width:150px;
  white-space:nowrap;
  font-size:14px;
  font-weight:700;
  color:#34525d;
}

.logs-agent,
.filelogs-agent{
  min-width:320px;
  max-width:420px;
  color:#607983;
  font-size:13px;
  line-height:1.5;
  white-space:normal;
  word-break:break-word;
}

.users-actions{
  display:flex;
  gap:10px;
  flex-wrap:nowrap;
  align-items:center;
  min-width:220px;
}

.users-action-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  padding:0 14px;
  border-radius:12px;
  font-size:14px;
  font-weight:700;
  text-decoration:none;
  transition:all .18s ease;
  border:1px solid transparent;
  white-space:nowrap;
}

.users-action-edit{
  background:rgba(64,146,182,0.08);
  color:#0a2a38;
  border-color:rgba(64,146,182,0.16);
}

.users-action-edit:hover{
  background:rgba(64,146,182,0.14);
  transform:translateY(-1px);
}

.users-action-delete{
  background:#fff5f5;
  color:#b33a3a;
  border-color:#efc5c5;
}

.users-action-delete:hover{
  background:#ffecec;
  transform:translateY(-1px);
}

.users-empty,
.logs-empty,
.filelogs-empty{
  padding:26px 20px;
  color:#6b8088;
  font-size:14px;
}

.users-type-badge,
.logs-type-badge,
.filelogs-type-badge,
.users-status-badge,
.users-count-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:30px;
  padding:0 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.02em;
  white-space:nowrap;
}

.users-type-badge,
.logs-type-badge,
.filelogs-type-badge{
  min-width:84px;
}

.users-type-private,
.logs-type-private,
.filelogs-type-private{
  background:#eef3f6;
  color:#4f6974;
}

.users-type-company,
.logs-type-company,
.filelogs-type-company{
  background:#e8f5fb;
  color:#0d5269;
}

.users-status-badge{
  min-width:78px;
}

.users-status-active{
  background:#e8f6ec;
  color:#1f7a46;
}

.users-status-inactive{
  background:#fff3e8;
  color:#a65b00;
}

.users-count-badge{
  min-width:46px;
  background:rgba(64,146,182,0.10);
  color:#0a2a38;
}

/* =========================
   FOOTER PRO FRONTEND
========================= */

.site-footer{
  background:#5f5f5f;
  color:#fff;
  margin-top:40px;
}

.site-footer-inner{
  max-width:1200px;
  margin:0 auto;
  padding:40px 24px 28px;
}

.footer-top{
  display:grid;
  grid-template-columns:1.5fr 1fr 1.5fr 1fr;
  gap:40px;
  align-items:flex-start;
}

.footer-col{
  font-size:16px;
  line-height:1.6;
  color:rgba(255,255,255,.85);
}

.footer-col h3{
  font-size:32px;
  font-weight:800;
  margin-bottom:10px;
  color:#fff;
  line-height:1.2em;
}

.footer-col strong{
  font-weight:800;
  color:#fff;
}

.footer-right{
  text-align:right;
}

.footer-right a{
  color:#8ECED4;
  text-decoration:none;
}

.footer-right a:hover{
  text-decoration:underline;
}

.footer-bottom{
  margin-top:30px;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.2);
  font-size:14px;
  color:rgba(255,255,255,.75);
}

.footer-bottom a{
  color:#8ECED4;
  text-decoration:none;
}

.footer-bottom a:hover{
  text-decoration:underline;
}

.footer-credits{
  margin-top:14px;
  font-size:13px;
  color:rgba(255,255,255,.55);
}

/* =========================
   DASHBOARD CHARTS RESPONSIVE
========================= */

.dashboard-charts{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:20px;
  margin-bottom:20px;
}

.chart-card{
  background:#fff;
  border:1px solid #dce5e8;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 4px 14px rgba(0,0,0,.04);
  min-width:0;
}

.chart-card-head{
  padding:18px 20px;
  border-bottom:1px solid #edf3f6;
  background:linear-gradient(180deg,#fbfdfe 0%, #f4f8fa 100%);
}

.chart-card-head h2{
  margin:0;
  font-size:20px;
  font-weight:800;
  color:#0a2a38;
  line-height:1.2;
}

.chart-card-head p{
  margin:6px 0 0;
  font-size:14px;
  color:#6b8088;
  line-height:1.5;
}

.chart-body{
  padding:20px;
  min-width:0;
}

.chart-scroll{
  width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  padding-bottom:8px;
  -webkit-overflow-scrolling:touch;
}

.chart-scroll::-webkit-scrollbar{
  height:10px;
}

.chart-scroll::-webkit-scrollbar-thumb{
  background:#c9d6dc;
  border-radius:999px;
}

.chart-scroll::-webkit-scrollbar-track{
  background:#eef3f6;
  border-radius:999px;
}

.chart-bars{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px;
  min-height:230px;
}

.chart-col{
  flex:0 0 24px;
  min-width:24px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}

.chart-value{
  font-size:12px;
  font-weight:800;
  color:#4f6974;
  line-height:1;
  text-align:center;
}

.chart-bar-wrap{
  width:100%;
  max-width:54px;
  min-height:180px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
}

.chart-bar{
  width:100%;
  min-height:6px;
  border-radius:14px 14px 6px 6px;
  background:linear-gradient(180deg,#5ba2c1 0%, #0d5269 100%);
  box-shadow:0 8px 16px rgba(13,82,105,.12);
}

.chart-bar--secondary{
  background:linear-gradient(180deg,#9ad5dc 0%, #4092B6 100%);
  box-shadow:0 8px 16px rgba(64,146,182,.10);
}

.chart-label{
  font-size:12px;
  font-weight:700;
  color:#6b8088;
  white-space:nowrap;
  min-height:18px;
  text-align:center;
}

/* =========================
   RESPONSIVE GLOBAL
========================= */

@media (max-width: 1200px){
  .file-table-head,
  .file-table-row{
    grid-template-columns:minmax(0,2fr) 120px 110px 170px 220px;
  }

  .users-table{
    min-width:1100px;
  }

  .logs-table{
    min-width:1060px;
  }

  .filelogs-table{
    min-width:1160px;
  }
}

@media (max-width: 1024px){
  .footer-top{
    grid-template-columns:1fr 1fr;
    gap:30px;
  }

  .footer-right{
    text-align:left;
  }
}

@media (max-width: 991px){
  .header{
    padding:40px 24px;
  }

  .header-inner{
    flex-direction:column;
    gap:28px;
  }

  .header-right{
    flex:1 1 100%;
    max-width:100%;
    text-align:left;
  }

  .header-logo{
    margin:0 0 16px 0;
    max-width:260px;
  }

  .header-left h1{
    font-size:34px;
  }

  .header-left p{
    font-size:16px;
  }

  .header-actions{
    justify-content:flex-start;
  }

  .app-layout{
    flex-direction:column;
  }

  .sidebar{
    position:relative;
    width:100%;
    height:auto;
    padding:20px 16px;
  }

  .app-header{
    padding:20px 16px;
  }

  .toolbar{
    grid-template-columns:1fr;
  }

  .results-bar{
    flex-direction:column;
    align-items:flex-start;
  }

  .login-card{
    max-width:94%;
    border-radius:22px;
  }

  .login-card-top{
    padding:16px 22px 16px;
  }

  .login-logo{
    max-width:320px;
    margin-bottom:10px;
  }

  .login-card-top h1{
    font-size:24px;
  }

  .login-card-top p{
    font-size:15px;
  }

  .login-card-body{
    padding:26px 24px 28px;
  }

  .register-grid{
    grid-template-columns:1fr;
  }

  .register-grid .full{
    grid-column:auto;
  }

  .upload-box{
    grid-template-columns:1fr;
    align-items:stretch;
  }

  .upload-box-right{
    justify-content:flex-start;
  }

  .upload-submit-btn{
    width:100%;
  }

  .file-table-head{
    display:none;
  }

  .file-table-row,
  .file-table-row--five{
    grid-template-columns:1fr;
    gap:14px;
    padding:18px 20px;
  }

  .file-col-size::before{
    content:"Dimensione: ";
    font-weight:800;
    color:#56707a;
  }

  .file-col-date::before{
    content:"Ultima modifica: ";
    font-weight:800;
    color:#56707a;
  }

  .file-col-opens::before{
    content:"N. aperture: ";
    font-weight:800;
    color:#56707a;
    margin-right:6px;
  }

  .file-col-actions{
    padding-top:4px;
  }

  .dashboard-charts{
    grid-template-columns:1fr;
  }

  .chart-card-head h2{
    font-size:18px;
  }

  .chart-card-head p{
    font-size:13px;
  }

  .users-table{
    min-width:1000px;
  }

  .logs-table{
    min-width:980px;
  }

  .filelogs-table{
    min-width:1040px;
  }
}

@media (max-width: 767px){
  .users-table,
  .logs-table,
  .filelogs-table,
  .table-responsive table{
    min-width:920px;
  }

  .admin-table thead th,
  .users-table thead th,
  .logs-table thead th,
  .filelogs-table thead th{
    font-size:11px;
    padding:12px 14px;
  }

  .admin-table tbody td,
  .users-table tbody td,
  .logs-table tbody td,
  .filelogs-table tbody td{
    padding:14px;
    font-size:13px;
  }

  .users-action-btn{
    min-height:38px;
    padding:0 12px;
    font-size:13px;
  }

  .logs-agent,
  .filelogs-agent{
    min-width:280px;
  }
}

@media (max-width: 700px){
  .main-wrap{
    padding:20px 16px 28px;
  }

  .card-body{
    padding:22px 18px;
  }
}

@media (max-width: 640px){
  .login-shell{
    padding:16px;
  }

  .account-switch{
    grid-template-columns:1fr;
    gap:12px;
  }

  .account-tab{
    font-size:17px;
    padding:16px 18px;
  }

  .field label{
    font-size:14px;
  }

  .field input,
  .field select,
  .field textarea{
    min-height:54px;
    font-size:16px;
    border-radius:14px;
    padding:22px 16px 9px;
  }

  .btn{
    min-height:56px;
    font-size:19px;
    border-radius:16px;
  }

  .btn-secondary{
    min-height:52px;
    font-size:15px;
  }

  .header{
    padding:28px 16px;
  }

  .header-badge{
    font-size:11px;
    margin-bottom:14px;
  }

  .header-badge-icon{
    width:34px;
    height:34px;
    font-size:16px;
  }

  .header-left h1{
    font-size:28px;
  }

  .header-left p{
    font-size:15px;
  }

  .header-logo{
    max-width:220px;
  }

  .header-info{
    font-size:13px;
    line-height:1.6;
  }

  .files-grid{
    grid-template-columns:1fr;
  }

  .login-card--narrow .login-card-top h1{
    font-size:23px;
  }

  .login-card--narrow .login-card-top p{
    font-size:14px;
  }

  .login-logo--small{
    max-width:220px;
  }

  .login-form .field input{
    min-height:56px;
  }

  .upload-panel-title{
    font-size:24px;
  }

  .upload-panel-text{
    font-size:14px;
  }

  .upload-box{
    padding:16px;
    border-radius:16px;
  }

  .upload-input-wrap{
    min-height:58px;
    border-radius:14px;
  }

  .upload-native-input::file-selector-button{
    padding:9px 14px;
    border-radius:10px;
    font-size:13px;
  }

  .footer-top{
    grid-template-columns:1fr;
  }

  .footer-col h3{
    font-size:24px;
  }

  .chart-card{
    border-radius:16px;
  }

  .chart-card-head{
    padding:16px;
  }

  .chart-body{
    padding:16px;
  }

  .chart-card-head h2{
    font-size:17px;
  }

  .chart-card-head p{
    font-size:13px;
  }

  .chart-bars{
    gap:8px;
    min-height:190px;
  }

  .chart-col{
    flex:0 0 20px;
    min-width:20px;
    gap:8px;
  }

  .chart-bar-wrap{
    min-height:140px;
    max-width:36px;
  }

  .chart-value{
    font-size:11px;
  }

  .chart-label{
    font-size:11px;
  }
}